vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No ‘Access-Control-Allow-Origin’ header is present on the requested resource.” 这种跨域错误。
要想本地正常的调试,解决的办法有三个:
一、后台更改header
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
这样就可以跨域请求数据了。
二、使用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(',')
}
})
}
}
通过这种方法也可以解决跨域的问题。
三、使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建)
例如请求的url:“http://app.clb528.cn/login/getcode”
1、打开config/index.js,在proxyTable中添写如下代码:
//vue.config.js
module.exports = {
publicPath: './',
lintOnSave:false,
devServer:{
open: true, //浏览器自动打开页面
//host,真机测试IP地址,也就是你自己电脑的IP,你手机要跟你电脑在同一个局域网内,
//特别强调,注意开发调试时的console.log(),打印过多会撑爆微信浏览器缓存,就打不开页面了,坑死。
host: "192.178.0.26",
// host: "localhost",
//真机测试端口
port: 8089,
https: false,
},
devServer: {
proxy: {
'/api': {
target: 'http://app.clb528.cn/', //对应自己的接口
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': 'http://app.clb528.cn/'
}
}
}
}
}
通过vue-cli3.x版本构建的项目则在根目录创建vue.config.js文件,一样的写法,这个配置文件在运行项目的时候自动加载。
最后在页面发送请求的时候:
getData () {
axios.get('/api/login/getcode', function (res) {
console.log(res)
})
通过这中方法去解决跨域,打包部署时还按这种方法会出问题。解决方法如下:
let serverUrl = '/api/' //本地调试时
// let serverUrl = 'http://f.apiplus.cn/' //打包部署上线时
export default {
dataUrl: serverUrl + 'login/getcode'
}
vue.config.js 是一个可选的配置文件,更多配置介绍https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
这个文件应该导出一个包含了选项的对象:
// vue.config.js
module.exports = {
// 选项...
}