处理vue-axios和vue-resource跨域题目

2024年3月14日 142次阅读 来源: Mr_houzi

个人博客同步文章
https://mr-houzi.com/2018/02/…

近来在进修vue，在vue中没有ajax，而是应用vue-resource和vue-axios举行数据通信。Vue2.0以后，官方引荐运用vue-axios。

题目

在运用vue-axios的post要求时涌现跨域题目。报错以下：

Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:8081' is therefore not allowed access. 
The response had HTTP status code 404.

处理

步骤

在config/index.js里增加proxyTable代办要领

proxyTable: {
    '/api': {
        target: 'http://api.com/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/vue'
        }
      }
}

target为目的地点

pathRewrite下为重定向地点(一般状况下为空即可)

完全地点为http://api.com/vue

然后在组件中要求以下：

created(){
    axios.post('/api/Login', {
       data: 'data'
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });
}

效果则是向http://api.com/vue/Login地点发送要求

迥殊声明

设置proxyTable代办要领后，须要解释掉引入在main.js设置的baseUrl，不然proxyTable无效，依旧涌现跨域报错。（这个非常重要，疑心了本身良久）

//main.js
// axios.defaults.baseURL = 'http://api.com/';//设置proxyTable代办处理跨域题目后解释掉baseURL
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

PS:vue-resource处理跨域题目同vue-axios一样设置proxyTable代办要领，不过不须要迥殊声明中的内容了。

    原文作者：Mr_houzi
    原文地址: https://segmentfault.com/a/1190000013397896
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞