美文网首页
vue 打包(dist)+nginx 跨域 后台请求数据

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

作者: zt_sole | 来源:发表于2020-07-13 11:26 被阅读0次

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;
        }
        
        
        
    }

相关文章

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

    vue 项目配置:打包后的环境配置,将后台请求接口设置成VUE_APP_API_BASE_URL=/api ,/a...

  • 前端跨域之withCredentials

    问题描述:vue 本地开发环境是通过axios直接请求后台,生产环境采用nginx代理;今天本地开发被跨域请求的问...

  • vue2.0-vue.config.js-代理配置环境配置避坑4

    第一部:避坑前期 今天打算将本地vue项目打包到服务器nginx部署,部署后发现不能请求到数据,提示跨域问题 但是...

  • 用nginx的反向代理机制解决前端跨域问题

    用nginx的反向代理机制解决前端跨域问题 Vue做前台,后台走接口就会遇到跨域问题。这里Nginx做反向代理是一...

  • Nginx反向代理跨域请求处理

    Nginx反向代理跨域请求处理 跨域报错信息 接收请求服务器8082端口 1.后台代码 发送服务器8083端口 2...

  • spring boot + VUE跨域处理

    在使用 vue 做前端开发时,碰到 vue 请求接口出现跨域问题。解决的方法,就在后台添加一个跨域请求的过滤器,来...

  • [mark]九种跨域方式实现原理

    前端如何使用proxyTable和nginx解决跨域问题 前言 前后端数据交互经常会碰到请求跨域,什么是跨域,以及...

  • vue 使用axios请求跨域

    最近遇到一个问题,后台接口已经请求通了,但是前端还是报跨域的问题。最后发现是后台有多个跨域配置。我们是nginx和...

  • vue中的跨域解决方法

    vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'A...

  • vue 跨域解决方法

    vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'A...

网友评论

      本文标题:vue 打包(dist)+nginx 跨域 后台请求数据

      本文链接:https://www.haomeiwen.com/subject/cicacktx.html