当前位置 : 主页 > 网络编程 > 其它编程 >

处理vueaxios和vueresource跨域题目

来源:互联网 收集:自由互联 发布时间:2023-07-02
个人博客同步文章https:mr-houzi.com201802…近来在进修vue,在vue中没有ajax,而是应用vue-resource和vue-axios举行数据通信。Vue 个人博客同步文章 https://mr-houzi.com/2018/02/ 近来在进修vue,在vue中没
个人博客同步文章https:mr-houzi.com201802…近来在进修vue,在vue中没有ajax,而是应用vue-resource和vue-axios举行数据通信。Vue

个人博客同步文章 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代办处理跨域题目后解释掉baseURLaxios.defaults.headers.common['Authorization'] = AUTH_TOKEN;axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

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

网友评论