vuecli4解决本地跨域,vue跨域问题的三种解决方案

　　本文主要介绍vuecli3打包后的跨域问题，以及无效前端配置拦截器的解决方案。有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。

打包后跨域问题，前端配置拦截器无效

问题

　　这些天，我完成了这个项目。打包完成后，我发现之前cli配置的拦截器打包后就不行了。我用了其他方法通过nginx反向代理配置跨域。

解决方案

　　在nginx的nginx.config中进行配置

　　配置如下

　　服务器{

　　听80；#监听端口

　　server_name本地主机；#代理服务地址

　　add _ header Access-Control-Allow-Origin *

　　位置/{

　　根目录C:/nginx-1 . 19 . 0/html/dist；#根目录！将此处的路径设置为项目的根路径。

　　自动索引打开；#开启nginx目录浏览功能

　　autoindex _ exact _ size off#文件大小以KB为单位显示

　　字符集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，* ；

　　}

　　#开始配置反向代理

　　位置/API {//CLI配置的接口名称

　　重写^/apis/(.*)$/$ 1 break；

　　包括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配置的接口名称

　　重写^/topicByCate/(.*)$/$ 1 break；

　　包括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//接口

　　}

　　位置@路由器{

　　重写^.* $/index . html last；

　　}

vue3处理跨域问题

在项目根目录新建vue.config.js输入

　　模块.导出={

　　devServer: {

　　代理服务器：{

　　/api: {

　　目标： 3358 www.example.com: 81/，//接口域名，端口根据各自的设置进行设置。

　　ChangeOrigin: true，//是跨域的吗？

　　Ws: true，//代理websockets？

　　Secure: true，//是https接口吗？

　　PathRewrite: {//路径重置

　　^/api:

　　}

　　};

如用到的是vite.config.js

　　添加到这个文件中。