前后端分离,你可以理解为这是两个不同的项目,前后端其实已经跨域了。我们在本地启动项目的时候npm run dev便可以启动我们的项目了,通常我们的请求地址是以localhost:8080来请求接口数据的,但是这仅仅是前端页面的启动,如何跟后台交互拿到后台数据呢?
通过在vue-cli配置文件里面设置一个代理,就能解决跨域的问题,通常需要后台来进行配置。
在config文件夹中新建一个文件命名为proxyConfig.js :
//项目域名地址
const testurl = 'http://exaple.com';
const localurl = 'http://172.***.***.233:8084';//后端本地地址
let ROOT,ROOT1;
let PROXYROOT;//代理指向地址
//由于封装的axios请求中,会将ROOT打包进去,为了方便之后不再更改,判断了当前环境,而生成的不同的ROOT
if (process.env.NODE_ENV === 'development') {
//开发环境下的代理地址,解决本地跨域跨域
ROOT = "/view" //公告接口
ROOT1 = "/newsflashview" //快讯接口
PROXYROOT = testurl
} else{
//生产环境下的地址
ROOT = testurl;
PROXYROOT = testurl
}
module.exports = {
proxy : {
[ROOT]: { //将www.exaple.com印射为ROOT 即/view
target: PROXYROOT, // 接口域名
ws: true,
changeOrigin: true
},
[ROOT1]: { //将www.exaple.com印射为ROOT1 即/newsflashview
target: PROXYROOT, // 接口域名
ws: true,
changeOrigin: true
}
},
}
//ROOT是根据你接口来的,此处我的接口服务器提供的接口为:http://exaple.com/view/usermessage
复制代码
vue-cli 2.0
vue proxyTable
var proxyConfig = require('./proxyConfig')
//修改项目中的config文件夹下的index.js配置文件中的dev:
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: proxyConfig.proxy,
cssSourceMap: false
}
复制代码
vue-cli 3.0
vue proxy
var proxyConfig = require('./proxyConfig')
//修改项目中的vue.config.js配置文件中的devServer:
// webpack-dev-server 相关配置
devServer: {
host: "localhost",
port: 8080,
https: false,
open: true,
hotOnly: false,
// 配置多个代理
proxy: proxyObj.proxy,// 设置代理
//或直接这样写
// proxy:{
// "/view": {
// target: "http://exaple.com",
// ws: true,
// changeOrigin: true,
// secure: false
// }
// },
before: app => {}
},
复制代码
大家只需关注配置proxy,其他配置不一定跟我一模一样,可以单独像我这样单独抽出来为一个js文件,也可以直接写在里面,随意哟