【vue】令人头疼的 CORS

跨域：

浏览器抛出 No 'Access-Control-Allow-Origin' header is present on the requested resource的错误~

什么是 CORS 问题

跨域资源共享（CORS）是一种浏览器机制，它允许网页从不同的域请求资源。CORS 与同源策略（SOP）结合使用，控制不同源之间的资源共享。同源策略是浏览器强制执行的安全特性，防止网页在没有明确权限的情况下向不同源发送请求。而 CORS 则是允许特定源访问资源的机制。

浏览器出现CORS 错误，这通常是由于服务器未正确配置 CORS 头导致的。

相对简单的修复

修改后端添加适当的 CORS 头

Access-Control-Allow-Origin：将其设置为你的 Vue.js 应用的源，或者在开发期间使用通配符（*），但不推荐在生产环境中使用通配符。

Access-Control-Allow-Methods：允许的 HTTP 方法，如 GET, POST, PUT, DELETE, OPTIONS。

Access-Control-Allow-Headers：允许的请求头，如 Content-Type, Authorization。

Node.js Express 

• app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'http://your-vuejs-app.com');
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    next();
  });

• 当使用自定义请求头、非 GET/POST 方法或特定内容类型时，浏览器会发送一个预检 OPTIONS 请求。你需要确保服务器能够正确处理这些请求，并返回必要的头。

当后端由自己控制时，这是最简单的解决方案

但是……

跨域调用第三方 API 或资源

1、使用代理服务器

服务器（自己后端）的反向代理绕过浏览器的 CORS 限制。

2、CORS 代理（这个还没试过）

fetch('https://proxy.corsfix.com/?https://example.com/api')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((err) => console.error(err));

dev模式下临时解决方案

1、浏览器 CORS 解除阻止器

浏览器扩展或设置可以暂时禁用 CORS

2、本地代理（常用）

module.exports = {
  devServer: {
    proxy: {
      '^/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true,
      },
      '^/foo': {
        target: '<other_url>',
      },
    },
  },
};