美文网首页Vue.js
VUE前后端分离解决跨域问题(配置前端服务器的nginx文件)

VUE前后端分离解决跨域问题(配置前端服务器的nginx文件)

作者: 逆世界开发者 | 来源:发表于2019-06-04 20:03 被阅读1次

在使用vue实现前后端分离的项目中,很容易出现跨域问题,纠结了很久,经过网上查阅资料,终于解决了这个问题:

修改前端的nginx配置文件如下:

location / {

            root  /apps/webroot/lebaobei_edu/web;

            try_files $uri $uri/ /index.html =404;

            add_header Access-Control-Allow-Origin *;

            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';

            add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

            if ($request_method = 'OPTIONS') {

                return 204;

            }

        }

# 匹配以/apis/开头的请求

        location ^~ /api/ {

            rewrite  ^/api/(.*)$ /$1 break;

            proxy_pass http://edu_lbb.bestshowgroup.com;//服务器端接口地址

        }

相关文章

  • Nginx 配置项目

    1、 HTTP 请求 2、HTTPS Nginx ssl配置 3、前后端分离(nginx跨域问题) 注意的是,前端...

  • vue cli 解决跨域 线上 nginx 反向代理配置

    vue cli 解决跨域 线上 nginx 反向代理配置 前后分离 axios 接 api 跨域问题如图: 解决办...

  • nginx跨域配置

    使用场景 项目采用前后端分离模式,前端需单独处理跨域 跨域配置 打开根目录下的conf/nginx.conf文件 ...

  • 浏览器跨域的那些事

    整理中 目标: 了解跨域 解决跨域 服务器配置跨域(java, nginx) 前端调试时配置解决跨域 一、什么是跨...

  • [vue-cli]axios跨域问题

    前后端分离,请求跨域问题。1、已经在后端进行了跨域配置: 但是在前端请求时还是有问题: 解决(= =):这段代码需...

  • spring boot http 转 https (配置http

    我的项目是前后端分离的项目,后端spring boot 前端vue,vue的跨域是用nginx代理的。 这里先介绍...

  • Node接口代理方案

    背景说明 前后端分离项目要解决的第一个问题前端本地开发如何解决ajax的跨域问题,一般情况下都是使用Nginx配置...

  • vue 跨域

    前后端分离之后,常出来的问题就是访问接口是出现跨域的问题,我们可以在配置文件中配置proxyTable来解决跨域问...

  • Django 后端解决跨域问题

    前端后端分离的项目,经常会遇到跨域请求的问题。解决跨域问题,有从前端的代理解决的方案,和用后端的解决方案。这里介绍...

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

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

网友评论

    本文标题:VUE前后端分离解决跨域问题(配置前端服务器的nginx文件)

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