微信扫一扫 分享朋友圈

已有 135 人浏览分享

开启左侧

VUE部署nginx跨域问题如何解决

[复制链接]
135 0
Vue的代理跨域问题,需要确定的是在开发阶段可以使用,部署到服务器后出现请求失败的问题(404),如下图。
image.png
这是因为VUE在打包的过程中并没有把代理配置也进行打包,需要配置跨域代理,这里我使用的是服务器是nginx代理实现跨域问题。
先去百度上下载一个nginx,然后进入conf目录,打开nginx.txt配置文件,
找到如下配置
VUE配置的代理
devServer: {
       proxy: {
         '/request': {   //以request后缀请求
           target: '地址:端口',  //转发地址
           ws: true,
                      pathRewrite:{'^/request':'/'},   //把request 替换成/
           changeOrigin: true
         }
       }
     }

转换到对应的服务器的配置跨域如下
server {
        listen       80;
        server_name  localhost;
                #匹配请求头为 request,把request 换成/ 然后提交proxy_pass http这个指定地址
               
                location ^~/request/ {
                add_header Access-Control-Allow-Origin *;
                add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
                add_header Access-Control-Allow-Credentials true;
                proxy_set_header X-NginX-Proxy true;               
                rewrite    ^(.*)request(.*)$   $1/$2; break;
                #root html/dist;
                proxy_pass http:这里是你的后台地址:端口号;
                index  index.html index.htm;

        }
                #匹配以/的请求 然后跳转到指定目录,
        location / {
                #我这里是指定的是nginx的html目录下的项目
            root html/dist;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }


以上配置就可以解决跨域代理问题

免责声明:
1,海欣资源网所发布的资源由网友上传和分享,不保证信息的正确性和完整性,且不对因信息的不正确或遗漏导致的任何损失或损害承担责任。
2,海欣资源网的资源来源于网友分享,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
3,海欣资源网所发布的资源由网友上传和分享,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
4,如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉,联系方式邮箱 haixinst@qq.com
海欣资源-企业信息化分享平台。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

0

关注

0

粉丝

48

主题
热度排行
回复排行
最新贴子

Archiver|手机版|海欣资源 ( 湘ICP备2021008090号-1 )|网站地图

GMT+8, 2022-11-27 23:36 , Gzip On, Redis On.

免责声明:本站所发布的资源和文章均来自网络,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。 本站信息来自网络,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉。