一、什么是跨域
跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。
所谓同源是指,域名,协议,端口均相同,举个例子:
http://www.123.com/index.html 调用 http://www.123.com/server.php (非跨域)
http://www.123.com/index.html 调用 http://www.456.com/server.php (主域名不同:123/456,跨域)
http://abc.123.com/index.html 调用 http://def.123.com/server.php (子域名不同:abc/def,跨域)
http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php (端口不同:8080/8081,跨域)
http://www.123.com/index.html 调用 https://www.123.com/server.php (协议不同:http/https,跨域)
请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。
二、解决方法
1、后台改header
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
2、
使用JQuery提供的jsonp (注:vue中引入jquery,自行百度)
methods: {
getData () {
var self = this
$.ajax({
url: 'http://f.apiplus.cn/bj11x5.json',
type: 'GET',
dataType: 'JSONP',
success: function (res) {
self.data = res.data.slice(0, 3)
self.opencode = res.data[0].opencode.split(',')
}
})
}
}
3、使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建)、
例如请求的url:“http://f.apiplus.cn/bj11x5.json”
1)打开config/index.js,在proxyTable中添写如下代码:
1 2 3 4 5 6 7 8 9 |
|
2)使用axios请求数据时直接使用“/api”:
1 2 3 4 |
|
通过这中方法去解决跨域,打包部署时还按这种方法会出问题。解决方法如下:
1 2 3 4 5 |
|
调试时定义一个serverUrl来替换我们的“/api”,最后打包时,只需要将“http://www.xxx.com”替换这个“/api”就可以了。