您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇“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; } }
在项目根目录新建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打包后前端配置拦截器无效怎么解决”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。