vue 打包(dist)+nginx 跨域 后台请求数据

2020-07-13  本文已影响0人  zt_sole

vue 项目配置:
打包后的环境配置,将后台请求接口设置成VUE_APP_API_BASE_URL=/api ,/api 在nginx 中做实际的转发,详见【nginx配置】

参照自己的后台请求接口设置,本文的后台请求最终都会通过gateway在进行一次转发具体的微服务

NODE_ENV=production
VUE_APP_PREVIEW=false
VUE_APP_API_BASE_URL=/api  
image.png

nginx 配置:

    server {
        listen       10280;
        server_name  localhost;
        # 允许请求地址跨域 * 做为通配符
        add_header 'Access-Control-Allow-Origin' '*';
        # 设置请求方法跨域
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
        # 设置是否允许 cookie 传输
        add_header 'Access-Control-Allow-Credentials' 'true';
        # 设置请求头 这里为什么不设置通配符 * 因为不支持
        add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Data-Type,X-Requested-With,X-Data-Type,X-Auth-Token';
                # vue 打包的dist文件路径
        root D:/myWeb/dist; 
        location / {    
            index  index.html index.htm;
            try_files $uri $uri/ @router;
        }
        location @router {
            rewrite ^.*$ /index.html last;
        }
        # 后台请求接口转发到接口地址(gateway 地址)
        location /api {
            #add_header 'Access-Control-Allow-Origin' '*';
            #add_header 'Access-Control-Allow-Methods' 'POST,GET,OPTIONS';
            proxy_pass http://localhost:10200;
        }
        
        # 设置 options 请求处理
        if ( $request_method = 'OPTIONS' ) { 
            return 200;
        }
        
        
        
    }
上一篇 下一篇

猜你喜欢

热点阅读