[跨越5种解决方案] 浏览器安全协议 vonfig.js cors库 配置请求头 nginx

1.浏览器禁用安全协议

如果两个地址的  协议， 地址，端口 三者任何一个不一样  发送ajax请求就会发生跨域的行为

在公司开发的过程中， 只需要自己给浏览器设置特定的字段，禁用了他的安全协议就可以任意访问

在原始桌面浏览器上面  右键新建快捷方式， 然后再上面右键 查看属性； 然后再属性的目标位置， 加上一个空格，再接上下面的一段话；  并且要在c潘下面创建 一个下面的目录

   --disable-web-security --user-data-dir=C:\MyChromeDevUserData

2. vue.config.js

    // 设置代理
    module.exports = {
      devServer: {
        open: true,
        port: 9000,
        proxy: {
          '/api': {
            target: 'http://localhost:3000',
            changeOrigin: true,
            wx: true,
            pathRewrite: {
              '^/api': '',
            },
          },
        },
      },
    };
    
    // 这个里面基本上可以配置所有webpek的配置
    对于想进行base64 编码的 图片大小设置
    { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }

3. cors库

app.use(cors())  针对于所有域名，不好，不能使用cookies， 一般要写具体的域名
app.use(cors({origin: "http://localhost:8080"}))

4. 配置请求头

    Access-Control-Allow-Origin   是允许跨域的域名
    Access-Control-Allow-Methods  是允许的请求方式 （简单请求指的是GET POST HEAD）
    Access-Control-Allow-Headers  跨域允许包含的头，指定浏览器CORS请求会额外发送的头信息字段
    Access-Control-Allow-Credentials  true   表示是否允许发送Cookie, 只能设置为true，  这个要对应前端库例如 axios 开启 withCredentials属性
    
    app.all('*', function (req, res, next) {
      res.header('Access-Control-Allow-Origin', 'http://localhost:9000');
      next();
    });
    
    
    response headers  后端传递到前端的请求头
    request headers  这个是前端传递给后端的请求头

5.nginx代理