vue跨域配置方安方法

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  这个是前端传递给后端的请求头