vuecli3打包后出现跨域问题,前端配置拦截器无效的解决

 更新时间:2022年06月02日 14:31:33   作者:圆内~搁浅  
这篇文章主要介绍了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': ''
                }
            }
        }
    }
};

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 基于Vue实例生命周期(全面解析)

    基于Vue实例生命周期(全面解析)

    下面小编就为大家带来一篇基于Vue实例生命周期(全面解析)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 关于vue项目一直出现 sockjs-node/info?t=XX的解决办法

    关于vue项目一直出现 sockjs-node/info?t=XX的解决办法

    sockjs-node 是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、全双工的浏览器和web服务器之间通信通道,这篇文章主要介绍了vue项目一直出现 sockjs-node/info?t=XX的解决办法,需要的朋友可以参考下
    2023-12-12
  • VueJS如何引入css或者less文件的一些坑

    VueJS如何引入css或者less文件的一些坑

    本篇文章主要介绍了VueJS如何引入css或者less文件的一些坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • vue.js实例todoList项目

    vue.js实例todoList项目

    本篇文章主要介绍了vue.js实例todoList项目,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • vue清空form对象的方法

    vue清空form对象的方法

    这篇文章主要介绍了vue清空form对象的方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue全局变量的定义及使用方法

    Vue全局变量的定义及使用方法

    这篇文章主要给大家介绍了关于Vue全局变量的定义及使用的相关资料,定义完全局变量后,我们可以在程序中的任何地方使用它们,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • vue基于elementUI表格状态判断展示方式

    vue基于elementUI表格状态判断展示方式

    这篇文章主要介绍了vue基于elementUI表格状态判断展示方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 解决vue-cli webpack打包后加载资源的路径问题

    解决vue-cli webpack打包后加载资源的路径问题

    今天小编就为大家分享一篇解决vue-cli webpack打包后加载资源的路径问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue3状态管理之Pinia的入门使用教程

    Vue3状态管理之Pinia的入门使用教程

    Pinia是Vue.js的轻量级状态管理库,比起vue3中的Vuex状态管理,pinia更轻量,更容易使用,下面这篇文章主要给大家介绍了关于Vue3状态管理之Pinia的入门使用教程,需要的朋友可以参考下
    2022-04-04
  • 解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目

    解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目

    这篇文章主要介绍了解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目.文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02

最新评论