Appearance
常见问题整理
解决跨域问题
项目上线解决跨域问题
- 线上配置文件需要通过nginx做转发,才能解决
ini
# 解决使用history模式的时候刷新页面404的问题
location / {
try_files $uri $uri/ /index.html;
}
# 解决项目跨域的问题
location /跨域地址 { # location /pro_api {
proxy_pass 项目地址; # proxy_pass http://127.0.0.1:9999/api/v1;
client_max_body_size 100M;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
# socket.io配置跨域问题
location /socket.io/ {
# 此处改为 socket.io 后端的 ip 和端口即可
proxy_pass http://127.0.0.1:9999;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_http_version 1.1;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
}
# websocket配置隐藏端口号
location /wss{
# 此处改为websocket后端的 ip 和端口即可
proxy_pass http://127.0.0.1:23481;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_set_header X-Real-IP $remote_addr;
}
- 后端解决跨域问题
开发项目解决跨域问题
同时需要在.env.development中进行相应的配置
VUE_APP_API_URL="http://127.0.0.1:8099/api/v1"
VUE_APP_DOWNLOAD_URL="http://127.0.0.1:8099/"
VUE_APP_STATIC_URL="http://127.0.0.1:8099/"
VUE_APP_BASE_API="/dev-api"
VUE_APP_SOCKET_API="/socket.io"
VUE_APP_SOCKET_URL="http://127.0.0.1:8099"
需要在本地的vue.config.js中进行配置
js
const devServerPort = 8801; // 配置端口号
export default{
devServer: {
port: devServerPort,
open: true, // 启动项目自动打开
// 显示警告和错误
overlay: {
warnings: false,
errors: true
},
// 是否将运行进度输出到控制台
progress: false,
// 配置代理
proxy: {
// 域名数据代理
[process.env.VUE_APP_BASE_API]: {
target: process.env.VUE_APP_API_URL,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
},
// socketIO代理
[process.env.VUE_APP_SOCKET_API]: {
changeOrigin: true,
target: process.env.VUE_APP_SOCKET_URL,
logLevel: 'debug'
}
}
},
}