Vue项目中的跨域问题
一般我们的前端Vue项目中都会涉及到跨域的问题,在项目中访问web域名获取数据时无法正常获取,浏览器控制台会类似出现
跨域一般分两种情形:
-
开发环境跨域
项目使用的是axios请求网络,将baseUrl修改为/api (这里是使用webpack提供的代理功能将/api代理成目标接口host)
axios.defaults.baseURL = '/api';
进入config/index.js里,在dev下增加proxyTable配置,可以匹配到/api,将其代理成目标接口host
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'xxxxxxxxxxxxx',//目标接口域名
changeOrigin: true,//是否跨域
pathRewrite: {
'^/api': ''//重写接口,后面可以使用重写的新路径,一般不做更改
}
}
}
}
此时已经解决了dev下的跨域问题。
进入package.json,在dev字段下增加 " --host 0.0.0.0 ",这样可以真机通过ip地址访问项目,进行调试
"scripts": {
"dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
}
-
生产环境跨域
同样将axios的baseURL修改为 /api, (生产环境下是使用nginx反向代理,将/api 代理成目标接口host).
axios.defaults.baseURL = '/api';
进入config/index.js里,在build下修改项目路径,将assetsPublicPath字段的 '/' 修改为 '/your_project_name' (名称和项目名称目录一致)
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/your_project_name',
...
}
build项目,将生成的dist文件夹里的文件,复制到tomcat服务器的webapps的项目目录下,我们这里结合nginx使用反向代理来解决。进入nginx/conf目录,新建文件夹your_project_name,以及our_project_name.conf文件
编辑your_project_name.conf配置文件,配置反向代理.
server {
listen 83; #监听83端口,可以改成其他端口
server_name localhost; # 当前服务的域名(nginx所在服务器域名)
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://localhost:8080;#代理项目部署的地址(这里项目部署在了当前服务器tomcat上,端口8080)
proxy_redirect default;
}
location /api { #添加访问目录为/api的代理配置,使以“/api”开头的地址都转到“http://192.168.1.111:8080”上
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://192.168.1.111:8080;
}
}
接着进入nginx/conf/nginx.conf配置文件,导入上面的your_project_name.conf配置.
http {
...
include myconfig/*.conf;
...
}
此时已可以通过nginx代理访问tomcat下的项目,并且解决了跨域问题.