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

最新推荐文章于 2024-07-11 15:38:00 发布

饭啦啦

最新推荐文章于 2024-07-11 15:38:00 发布

阅读量757

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_36434345/article/details/127167275

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

关于浏览器Provisional headers are shown提示的解决方案
vue2项目请求常见跨域报错问题，如下图
在这里插入图片描述
解决如下:

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);
    }
  );