部署renren-fast-vue前台遇到的跨域问题

Y_Hungry

已于 2022-02-09 20:13:13 修改

阅读量987

点赞数

分类专栏： Java 服务器前端文章标签： vue.js javascript 前端

于 2022-01-19 14:08:18 首次发布

本文链接： https://blog.csdn.net/weixin_41012767/article/details/122579666

版权

服务器同时被 3 个专栏收录

35 篇文章 2 订阅

订阅专栏

Java

16 篇文章 1 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

1.后台默认的Dockerfile不要动，去打包

2.前端代码记得要修改成域名

3.反向代理到网关指定的地址

#PROXY-START/api

location ^~ /api/
{
    proxy_pass http://xxx.xxx.xxx.xxx:88;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_cookie_path / /;
    add_header X-Cache $upstream_cache_status;
    
    #Set Nginx Cache
    
    
    set $static_filermLKzNdZ 0;
    if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
    {
    	set $static_filermLKzNdZ 1;
    	expires 12h;
        }
    if ( $static_filermLKzNdZ = 0 )
    {
    add_header Cache-Control no-cache;
    }
}

#PROXY-END/api

配置很简单，不过我却搞了好几天，这里大概给大家讲一下重点部分，

1、location 支持配置项目的绝对路径

2、假设我们的后台API地址是以API开头，location ^~ /api/ 代表nginx将会拦截请求地址中包含"/api/"字样的请求，其实这就是我们的ajax请求路径，拦截到请求之后根据写法会分成两种情况把这个请求转发到下面 proxy_pass 的地址上。

举个例子:

a、如上图，如果proxy_pass 的URL以 / 结尾，那么请求转发的时候将不会带上匹配到的 /api/ ，也就是说如果登录请求 URL是 localhost:60001/api/user/login，proxy_pass URL 是 http://a.xx.com:8080/platform/， Nginx将会把这个请求转发成 http://a.xx.com:8080/platform/user/login

b、如果proxy_pass 的URL不以 / 结尾，那么请求转发的时候将会带上匹配到的 /api/ ，也就是说如果登录请求 URL是 localhost:60001/api/user/login，proxy_pass URL 是 http://a.xx.com:8080/platform/， Nginx将会把这个请求转发成 http://a.xx.com:8080/platform/api/user/login

3、一般我们登录之后服务器会通过Set-Cookie把token写回到我们本地，如果不设置 proxy_cookie_path 的话，服务器Set-Cookie命令会失效，本地存不了cookie，从而导致token丢失。

这里proxy_cookie_path有一点需要注意的是如果 proxy_pass URL 是 http://a.xx.com:8080/platform/ 这种情况 proxy_cookie_path应该设置成 /platform/ / (注意两个斜杠之间有空格)。

如果 proxy_pass URL 是 http://a.xx.com:8080/这种情况 proxy_cookie_path应该设置成 / / (注意两个斜杠之间有空格)

重启下nginx，你就会发现一切都正常了。

Y_Hungry

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
部署renren-fast-vue前台遇到的跨域问题

1.后台默认的Dockerfile不要动，去打包2.#PROXY-START/apilocation ^~ /api/{ proxy_pass http://xxx.xxx.xxx.xxx:88; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
复制链接

扫一扫