vuecli3打包后出现跨域问题,前端配置拦截器无效
程序员文章站
2022-03-04 13:33:09
...
问题
这几天在把项目弄好,打包完成后发现之前cli配置的拦截器没有在打包后没起到作用,使用别的方法通过nginx反向代理进行配置跨域。
解决方案
在nginx里面的nginx.config里面配置
配置如下
server {
listen 80;#监听端口
server_name localhost;#代理服务地址
add_header Access-Control-Allow-Origin *;
location / {
root C:/nginx-1.19.0/html/dist; #根目录!!,把这里路径设置为项目的根路径
autoindex on; #开启nginx目录浏览功能
autoindex_exact_size off; #文件大小从KB开始显示
charset utf-8; #显示中文
add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
}
#开始配置我们的反向代理
location /apis{//cli配置的接口名
rewrite ^/apis/(.*)$ /$1 break;
include uwsgi_params;
proxy_set_header Host $host;
proxy_set_header x-forwarded-for $remote_addr;
proxy_set_header X-Real-IP $remote_addr;
proxy_pass http://*****:8080;//接口
}
location /topicByCate{//cli配置的接口名
rewrite ^/topicByCate/(.*)$ /$1 break;
include uwsgi_params;
proxy_set_header Host $host;
proxy_set_header x-forwarded-for $remote_addr;
proxy_set_header X-Real-IP $remote_addr;
proxy_pass https://******.com;//接口
}
location @router {
rewrite ^.*$ /index.html last;
}
}
上一篇: JS 浏览器兼容工具库