vue 解决跨域的问题

(1).什么是跨域

跨域:由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一个与当前页面地址不同即为跨域。存在跨域的情况:

网络协议不同,如http协议访问https协议。

端口不同,如80端口访问8080端口。

域名不同,如qianduanblog.com访问baidu.com。

子域名不同,如abc.qianduanblog.com访问def.qianduanblog.com。

域名和域名对应ip,如www.a.com访问20.205.28.90.

下面是项目使用vue-cli脚手架搭建

使用http-proxy-middleware 代理解决跨域问题

例如请求的url:“http://f.apiplus.cn/bj11x5.json

1、打开config/index.js,在proxyTable中添写如下代码:

proxyTable: {

  '/api': {  //使用"/api"来代替"http://f.apiplus.c"

    target: 'http://f.apiplus.cn', //源地址

    changeOrigin: true, //是否跨域

    pathRewrite: {

      '^/api': 'http://f.apiplus.cn' //路径重写

      }

  }

}

2、使用axios请求数据时直接使用“/api”:

getData () {

axios.get('/api/bj11x5.json', function (res) {

  console.log(res)

})

通过这中方法去解决跨域,打包部署时还按这种方法会出问题。解决方法如下:

let serverUrl = '/api/'  //本地调试时

// let serverUrl = 'http://f.apiplus.cn/'  //打包部署上线时

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    他方l阅读 1,077评论 0 2
  • 注:文章太长了,因此分为两段,但第一部分比较常用也更重要,可重点掌握。跨域指的是浏览器不能执行其它网站的脚本,由于...
    AizawaSayo阅读 3,861评论 0 4
  • 跨域在接口调用的时候经常会出现,它是基于什么原因产生的呢? 说到跨域就必须提到同源策略。什么是同源策略呢? 同源策...
    嘭嘭嘭鹏阅读 1,070评论 0 1
  • 1. 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScri...
    cbw100阅读 6,389评论 2 86
  • 题目1.什么是同源策略? 同源策略(Same origin Policy): 浏览器出于安全方面的考虑,只允许与本...
    FLYSASA阅读 1,752评论 0 6