vue解决跨域cors问题,针对vuecli4项目 关于浏览器Provisional headers are shown提示 的解决方案

关于浏览器Provisional headers are shown提示 的解决方案
vue2项目请求常见跨域报错问题,如下图
vue解决跨域cors问题,针对vuecli4项目 关于浏览器Provisional headers are shown提示 的解决方案_第1张图片
解决如下:

vue.config.js中配置代理,

module.exports = {

  lintOnSave: false,
  devServer:{
    open:false,      // 是否打开浏览器;
    hotOnly:true,    // 是否热更新;
    disableHostCheck: true,
    proxy:{
        '/api':{   // 路径中有 /api 的请求都会走这个代理 
            target:'http://localhost:8081',    // 目标代理接口地址,实际跨域要访问的接口,记得是填你后端springboot的端口,
            secure:false,
            changeOrigin:true,  // 开启代理,在本地创建一个虚拟服务端
            ws:true,       // 是否启用  websockets;
            pathRewrite:{   // 去掉 路径中的  /api  的这一截
                '^/api':''
            }
        },
    
    },

}
 }

axios头部添加Content-Type和Access-Control-Allow-Origin


//http request 拦截器
axios.interceptors.request.use(
    config => {
      config.headers = {
        'Access-Control-Allow-Origin': '*',
        // 'Accept': 'application/json' ,
        // "Access-Control-Allow-Headers":"X-Requested-With",
        // "Access-Control-Allow-Methods":"PUT,POST,GET,DELETE,OPTIONS",
        // 'Access-Control-Allow-Headers':'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild',
        // "X-Powered-By":' 3.2.1',

        'Authorization':'',  //这里添加token信息
        'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8',  //此处是增加的代码,设置请求头的类型
        
      };
      return config;
    }, err => {
      return Promise.reject(err);
    }
  );

你可能感兴趣的:(Vue,vue.js,javascript,前端)