VUE-Axios-解决跨域问题.

1 篇文章 0 订阅

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': '/'  // 路径重写
        }
      },
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中使用axios发送GET请求解决跨域问题,可以通过以下步骤: 1. 安装axios:在命令行中运行 `npm install axios` 或者 `yarn add axios`,安装axios库。 2. 在Vue组件中引入axios:在需要使用axios的组件中,可以通过import语句引入axios。 ```javascript import axios from 'axios'; ``` 3. 发送GET请求:使用axios的get方法发送GET请求,并设置`Access-Control-Allow-Origin`头部字段。 ```javascript axios.get('http://api.example.com/data', { headers: { 'Access-Control-Allow-Origin': '*' } }).then(response => { // 处理响应数据 }).catch(error => { // 错误处理 }); ``` 解释:跨域请求是指在浏览器上从一个域名的网页向另一个域名的服务器发送请求。由于浏览器的同源策略限制,普通的Ajax请求只能向同一域名下的接口发送请求,无法直接访问其他域名下的接口。为了解决这个问题,可以使用JSONP、CORS等方式进行跨域请求。 上述代码中,使用了Axios库发送GET请求,并在请求头中设置了`Access-Control-Allow-Origin`字段。这个字段指示服务器允许任何源(域、协议和端口)的网站访问该API接口。注意:实际生产环境中,应该根据实际情况设置合适的跨域策略。 相关问题: 1. 除了设置`Access-Control-Allow-Origin`,还有哪些常见的跨域解决方案? 2. Axios支持哪些其他常用的请求方法? 3. 如何处理Axios发送请求时的错误信息?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值