解决vue-axios和vue-resource跨域问题

nanfeiyan 发布于2019-08-22 14:52 / 2947人阅读

摘要：个人博客同步文章最近在学习，在中没有，而是利用和进行数据通信。问题在使用的请求时出现跨域问题。这个非常重要，困惑了自己好久设置代理解决跨域问题后注释掉解决跨域问题同一样设置代理方法，不过不需要特别声明中的内容了。

个人博客同步文章 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代理方法，不过不需要特别声明中的内容了。

GPU服务器海外云主机租用idc机房解决的问题和带来的效益跨域问题跨域解决办法 cdn跨域问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92948.html

使用vue-axios和vue-resource解决vue中调用网易云接口跨域的问题

摘要：使用和解决中调用网易云接口跨域的问题新建项目新建项目新建项目然后具体设置如下项目名称项目描述作者回车即可注意这里要安装和然后和都选择即可安装项目依赖安装模块安装模块运行项目效果图如下修改页面内容我们先修改一下页面内容调用网易使用vue-axios和vue-resource解决vue中调用网易云接口跨域的问题 1. 新建vue项目 1.1 新建项目新建项目 vue init webp...

_ivan 2019-06-28 13:40 评论0 收藏0
关于vue-resource在dev环境下跨域问题的解决方法

摘要：跨域问题相信跨域问题是每个前端在请求中都会遇到的问题因为浏览器的同源策略的限制所以是不支持跨域的当然当后台在没有完成搭建的时候这时候我们需要使用到模拟数据的时候这时候很多的就会出现跨域问题在中当然这个问题也不例外如下所以在此我也就整理出了跨域问题相信跨域问题是每个前端在ajax请求中都会遇到的问题,因为浏览器的同源策略的限制,所以ajax是不支持跨域的,当然当后台在没有完成搭建的...

timger 2019-08-20 17:49 评论0 收藏0
axios异步请求数据的简单使用

摘要：使用模拟好后端数据之后模拟数据的使用参考，就需要尝试请求加载数据了。数据请求选择了，现在都推荐使用。规定要发送到服务器的数据。布尔值，表示请求是否异步处理。要求为类型的参数，请求成功后调用的回调函数。在一个中重写回调函数的字符串。使用Mock模拟好后端数据之后（Mock模拟数据的使用参考：https://segmentfault.com/a/11...），就需要尝试请求加载数据了。数...

forsigner 2019-08-23 14:40 评论0 收藏0
Vue.js学习

摘要：一基础学习模式下图不仅概括了模式，还描述了在中是如何和以及进行交互的。关于这一点我们将在后续反应系统中讨论。父组件通过向下传递数据给子组件，子组件通过给父组件发送消息。这个对象必须是普通对象原生对象，及原型属性会被忽略。 Vue.js 是用于构建交互式的 Web 界面的库。Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。其实和Jquery一样...

TIGERB 2019-08-21 14:15 评论0 收藏0
《从零构建前后分离的web项目》实战 - 欲善其事必先利其器继续打磨前端架构

摘要：工欲善其事必先利其器继续打磨前端架构抱歉生病拖更了，快乐本文永久更新地址填坑上回还真的有同学提到了这个问题，感谢细心的你。既实现了拦截又实现了状态的共享。愉快的拿到了数据这样，前后分离的项目可以这样借助测试接口，不需要骚扰任何人。工欲善其事必先利其器 - 继续打磨前端架构抱歉生病拖更了，1024快乐本文永久更新地址填坑上回还真的有同学提到了这个问题，感谢细心的你。@_noob...

Mike617 2019-08-23 12:30 评论0 收藏0