在JSFiddle中测试fetch API遭遇CORS错误，如何解决？

嘿，我来帮你搞定JSFiddle里遇到的CORS跨域问题～

首先得说清楚：CORS是浏览器的安全防护机制，就是为了防止随便什么网站都能请求其他域名的资源，所以完全绕开（啥配置都不改）其实做不到，但有几个适合测试的临时办法，还有正规的长期解决方案：

一、临时测试：不用改服务器的小技巧 #

这些方法只适合本地调试用，别用到生产环境哈：

• 开启浏览器的跨域调试模式：
  比如Chrome，你可以关闭它的CORS检查。右键点击Chrome图标选择“属性”，在“目标”栏末尾加上： --disable-web-security --user-data-dir="C:/ChromeTempSession"（注意前面有空格）。启动后浏览器会提示处于不安全模式，这时候再打开JSFiddle请求localhost就不会被拦截了。测试完记得关掉这个窗口，别用它浏览其他网站，安全性会降低。
• 搭个本地代理服务器：
  用Node.js写个简单的代理，把JSFiddle的请求转发到你的localhost。比如用http-proxy-middleware，代码大概是这样：

  const express = require('express');
  const { createProxyMiddleware } = require('http-proxy-middleware');
  const app = express();
  
  // 把/api开头的请求转发到你的localhost服务
  app.use('/api', createProxyMiddleware({
    target: 'http://localhost:你的服务端口',
    changeOrigin: true,
  }));
  
  app.listen(3000);
  

  启动这个代理后，在JSFiddle里请求http://localhost:3000/api/你的接口路径，代理会帮你转发请求，避开CORS限制。

二、正规解决方案：修改服务器配置（推荐） #

如果要长期让JSFiddle能访问你的localhost服务，必须在服务器端配置CORS，允许JSFiddle的域名发起请求。不同后端技术栈的配置方式不一样，举几个常见的例子：

• Node.js/Express：用cors中间件，指定允许的来源：

  const cors = require('cors');
  // 只允许JSFiddle的域名访问
  app.use(cors({
    origin: 'https://jsfiddle.net'
  }));
  

• Nginx：在你的服务器配置里添加响应头：

  add_header Access-Control-Allow-Origin https://jsfiddle.net;
  add_header Access-Control-Allow-Methods GET, POST, OPTIONS;
  add_header Access-Control-Allow-Headers Content-Type;
  

• 其他后端语言：核心都是在响应里加上Access-Control-Allow-Origin这个头，值设为https://jsfiddle.net就行。如果只是测试，也可以临时设为*（但这种方式不支持带Cookie的请求，正式环境别这么用）。

关于你贴的示例代码 #

你示例里请求的是https://www.vim.org/git.php，这个域名本身应该没配置允许JSFiddle的CORS，所以就算你搞定了localhost的问题，请求这个地址还是会被拦截。如果只是测试fetch API，建议先用自己的localhost服务来测试哦。

内容的提问来源于stack exchange，提问作者umbe1987