Appearance

解除浏览器跨域方法 ​

浏览器临时解决 ​

Windows ​

浏览器默认是开启安全模式，不允许跨域请求的。

可以通过非常手段来解除浏览器跨域限制，在平时开发调试中为了节省时间可以使用

  1. 方法一：再创建一个 Chrome 快捷方式，在目标属性中追加 --user-data-dir="C://Chrome dev session" --disable-web-security --test-type --ignore-certificate-errors 即可

  2. 方法二：使用 CMD 窗口，复制 Chrome 快捷方式中目标属性的值，然后追加 --user-data-dir="C://Chrome dev session" --disable-web-security --test-type --ignore-certificate-errors 敲回车。就会打个一个新的 Chrome 页面

注意：追加内容前面有空格

Mac ​

终端命令启动，临时启动一个浏览器

sh
open -n -a "Google Chrome" --args --disable-web-security --user-data-dir=/tmp/chrome-test

开发服务器配置反向代理 ​

通过本地代理 API 请求绕过跨域

js
// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://your-backend-server.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
};

Nginx 配置反向代理 ​

sh
server {
    listen 80;
    server_name local.dev;

    location /api {
        proxy_pass http://backend-server.com;
        add_header 'Access-Control-Allow-Origin' '*' always;
    }
}

后端设置 CORS 头 ​

http
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type