跨域问题是前后端分离项目的典型问题之一,前端采用vue-cli新建的项目运用接口代理来实现跨域处理
一、在vue项目中config/index.js文件中
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://api.demo.com/api', //代理域名
changeOrigin: true,//是否改变源
pathRewrite: {
'^/api': '/' //路径重写
}
}
},
二、后台更改header
header('Access-Control-Allow-Origin:*'); // '*'代表允许所有域名访问
// header('Access-Control-Allow-WithCredentials:true');
// 响应类型
header('Access-Control-Allow-Methods:*'); // '*'代表允许所有请求方式访问
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type');
三、使用JQuery提供的jsonp (注:vue中引入jquery,自行百度)
methods: {
getData () {
var that= this
$.ajax({
url: 'http://api.demo.com',
type: 'GET',
dataType: 'JSONP',
success: function (res) {
//请求成功后的操作
}
})
}
}
通过这中方法去解决跨域,打包部署时还按这种方法会出问题。解决方法如下:
let serverUrl = '/api/' //本地调试时
// let serverUrl = 'http://f.apiplus.cn/' //打包部署上线时
export default {
dataUrl: serverUrl + 'bj11x5.json'
}