今天在本地开发时候碰到了跨域的问题,突然觉着跨域问题在所难免啊,之前没有没有碰到总觉着解决跨域很高大上的样纸,其实就是受限于网络的同源策略,跨域前后端都可以进行处理。
1,后端更改header
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
2,使用jsonp进行跨域
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,使用webpack反向代理(项目中使用vue-cli脚手架搭建)
1,在config/index.js中的proxyTable添加如下代码:
proxyTable: {
'/gp': {
target: 'http://10.0.67.65/uat_branch/IspWeb/',
changeOrigin: true,
pathRewrite: {
'^/gp': ''
}
}
},
在公共的apiConfig中加入跨域的环境:
case 5:
//跨域环境
apiObj.baseUrl = '/gp/';
apiObj.File_upload_URL = '';
break
至此所有的请求接口类似:http://localhost:8080/gp/api/v1.0/user/login
尝试请求后发现该接口地址404,后发现:代理设置完成后需要重新 npm run dev
|