vuecli3打包后前端配置拦截器无效怎么解决

这篇“vuecli3打包后前端配置拦截器无效怎么解决”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vuecli3打包后前端配置拦截器无效怎么解决”文章吧。

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

问题

这几天在把项目弄好，打包完成后发现之前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;        }    }

vue3处理跨域问题

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

module.exports = {    devServer: {        proxy: {            '/api': {                target: 'http://www.example.com:81/', //接口域名，端口看各自设置的                changeOrigin: true,             //是否跨域                ws: true,                       //是否代理 websockets                secure: true,                   //是否https接口                pathRewrite: {                  //路径重置                    '^/api': ''                }            }        }    }};

如用到的是vite.config.js则在这个文件添加

module.exports = {    devServer: {        proxy: {            '/api': {                target: 'http://www.example.com:81', //接口域名,端口看各自设置的                changeOrigin: true,             //是否跨域                ws: true,                       //是否代理 websockets                secure: true,                   //是否https接口                pathRewrite: {                  //路径重置                    '^/api': ''                }            }        }    }};

以上就是关于“vuecli3打包后前端配置拦截器无效怎么解决”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。