vue3+vite解决跨域
vue3+vite解决跨域vitenginxvite//vite.config.jsserver: {port: '3000',open: false, //自动打开base: "./ ", //生产环境路径proxy: { // 本地开发环境通过代理实现跨域,生产环境使用 nginx 转发// 正则表达式写法'^/api': {target: 'http://xxx.xxx.xxx.xxx:99
·
vite
//vite.config.js
server: {
port: '3000',
open: false, //自动打开
base: "./ ", //生产环境路径
proxy: { // 本地开发环境通过代理实现跨域,生产环境使用 nginx 转发
// 正则表达式写法
'^/api': {
target: 'http://xxx.xxx.xxx.xxx:9999', // 后端服务实际地址
changeOrigin: true, //开启代理
rewrite: (path) => path.replace(/^\/api/, '')
}
}
},
nginx
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 8080;
server_name localhost;
location / {
try_files $uri $uri/ @router; #解决刷新后页面空白
root html;
index index.html index.htm;
# add_header 'Access-Control-Allow-Origin' '*';
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
location @router{ #重点:这里用来进行重写操作, 对应上面的@router
rewrite ^.*$ /index.html last;
}
location ~ /api/ { #重点: api转发,转发到你的api发布地址
rewrite /api/(.*)$ /$1 break;
proxy_pass http://xxx.xxx.xxx.xxx:8888;
}
include servers/*;
}
更多推荐
已为社区贡献2条内容
所有评论(0)