VUE-Axios-解决跨域问题.

最新推荐文章于 2024-10-02 12:09:21 发布

别人家的小方

最新推荐文章于 2024-10-02 12:09:21 发布

阅读量601

点赞数

分类专栏： VUE Web 文章标签： vue 网络协议

本文链接：https://blog.csdn.net/Aealen/article/details/128645076

版权

Web 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

VUE

1 篇文章 0 订阅

订阅专栏

文章详细介绍了Vue项目中使用axios遇到的跨域问题及其原因，强调了浏览器的同源策略。为了解决这个问题，文章提供了一种解决方案，即在`config/index.js`的proxyTable中配置目标接口地址，设置`target`,`secure`,`changeOrigin`和`pathRewrite`属性，以实现接口的代理，从而规避跨域限制。

摘要由CSDN通过智能技术生成

vue-axios跨域问题发现:

https://github.com/Aealen/TopicSelection-VUE

使用vue-axios向后端发送请求的时候遇到如下报错:

vue-axios跨域问题原因:

什么是跨域

**跨域：**指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

**例如：**a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，其实是浏览器的限制。理解这一点很重要！！！

同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；

如下表给出了相对http://www.example.com/dir/page.html的同源检测示例：

URL	结果	原因
http://www.example.com/dir2/other.html	成功	协议、域名、端口相同
http://www.example.com/dir/inner/another.html	成功	协议、域名、端口相同
https://www.example.com/secure.html	失败	协议不同 ( HTTPS )
http://www.example.com:81/dir/etc.html	失败	端口不同 ( 81 )
http://news.example.com/dir/other.html	失败	域名不同

vue-axios跨域问题解决:

在config\index.js中的proxyTable中添加…

 proxyTable: {
      '/apis': {
        target: 'http://localhost:8080/',  //要解决跨域的接口的域名
        secure:false,           //如果是https接口，需要配置这个参数
        changeOrigin: true,  // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
          '^/apis': '/'  // 路径重写
        }
      },
    },