由于后端需要通过请求取前端中的cookie信息,在本地开发模式中,直接请求接口,后端无法拿到前端cookie数据,

经测试需在 vue-cli 中使用代理,如果使用Nginx做反向代理需同时修改Nginx配置如下:

一、vue-cli配置

首先在vue.config.js中加入代理配置:

devServer: {
    port: 3000,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/': { //代理的请求
          target: 'http://x.x.x.x',//代理的目标地址
          changOrigin: true,
        //开启代理:在本地会创建一个代理服务,然后发送请求的数据,并同时接收请求的数据,这样客户端端和服务端进行数据的交互就不会有跨域问题
          ws: false,
     //关闭ws代理,代理全部请求时开启时,ws会导致webpack刷新报错
      }
    }
  },

二、Nginx配置

这里nginx做反向代理在Nginx.conf中加入以下配置:

add_header Access-Control-Allow-Origin  $http_origin;
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Cookie";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
proxy_set_header X-Real-IP $remote_addr;
add_header 'Access-Control-Allow-Credentials' true;
proxy_set_header Cookie $http_cookie;

vue-cli3.0本地代理cookie跨域请求Nginx配置的更多相关文章

  1. vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址

    一.开发环境中跨域 使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问非本机上的接口http://10.1.0.34:8000/queryRole.不同域名之间的访问 ...

  2. nginx反向代理实现跨域请求

    nginx反向代理实现跨域请求 跨域请求可以通过JSONP实现,缺点是需要修改被请求的服务器端代码进行配合,稍显麻烦通过在自己服务器上配置nginx的反向代理,可以轻松实现跨域请求 思路 示例服务器A ...

  3. vue-cli3.0+node.js+axios跨域请求session不一样的问题

    一.问题重述 使用的是,前后端分离,前端vue+axios请求,后端使用node搭建服务端接口,遇到的问题是,我通过登录接口吧数据存储型在session,我登录上以后,发现再次验证登录(另一个接口)的 ...

  4. .NET 反向代理 YARP 跨域请求 CORS

    使用过 nginx 的小伙伴应该都知道,这个中间件是可以设置跨域的,作为今天的主角,同样的 反向代理中间件的 YARP 毫无意外也支持了跨域请求设置. 有些小伙伴可能会问了,怎样才算是跨域呢? 在 H ...

  5. spring boot跨域请求访问配置以及spring security中配置失效的原理解析

    一.同源策略 同源策略[same origin policy]是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 什么是源 源[orig ...

  6. 用反向代理nginx proxy_pass配置解决ie8 ajax请求被拦截问题 ie8用nginx代理实现跨域请求访问 nginx405正向代理request_uri

    最近调PC版网站ie8的兼容性,发现所有ajax请求还没到后端服务器就直接ajax error了 ie8发不出ajax请求,断点调试发现ajax全进入了error,提示“No transport” 我 ...

  7. .net cookie跨域请求指定请求域名

    HttpCookie cookie = new HttpCookie("OrderApiCookie"); //初使化并设置Cookie的名称 cookie.HttpOnly = ...

  8. 跨域请求发送不了cookie问题: AJAX跨域请求JS配置和服务器端配置

    1.ajax是同步方式 $.ajax({ type: "post", url:url, async:false, data:datatosend, dataType:"j ...

  9. webService 跨域请求webconfig配置

    在webService文件夹下单独添加一个web.config <?xml version="1.0" encoding="UTF-8"?>< ...

随机推荐

  1. python3笔记九:python数据类型-String字符串

    一:学习内容 字符串概念 字符串运算 字符串函数:eval().len().lower().upper().swapcase().capitalize().title().center().ljust ...

  2. redis事务命令

    MULTI开启事务,相当于mysql 的START TRANSACTION; EXEC执行事务 ,相当于mysql的commit; DISCARD放弃执行事务,相当于mysql的rollback; W ...

  3. Android Context完全解析与各种获取Context方法

    Context类型 我们知道,Android应用都是使用Java语言来编写的,那么大家可以思考一下,一个Android程序和一个Java程序,他们最大的区别在哪里?划分界限又是什么呢?其实简单点分析, ...

  4. Navicat1_介绍

    https://study.163.com/course/courseMain.htm?courseId=1006383008&share=2&shareId=400000000398 ...

  5. Error-ASP.NET:在从服务器接收结果时发生传输级错误。 (provider: Session Provider, error: 19 - 物理连接不可用)

    ylbtech-Error-ASP.NET:在从服务器接收结果时发生传输级错误. (provider: Session Provider, error: 19 - 物理连接不可用)  1.返回顶部 1 ...

  6. 【flask】环境配置-python-dotenv的使用

    [自动发现程序实例] 一般来说,在执行flask run命令运行程序前,我们需要提供程序实例所在模块的位置 . Flask会自动探测程序实例,自动探测存在下面这些规则: 从当前目录寻找app.py和w ...

  7. emqtt emq 的用户密码认证

    MQTT 认证设置 EMQ 消息服务器认证由一系列认证插件(Plugin)提供,系统支持按用户名密码.ClientID 或匿名认证. 系统默认开启匿名认证(anonymous),通过加载认证插件可开启 ...

  8. EMQTT测试--安装与测试 (windows)

    我下载的是windows版 安装 参考http://emqtt.com/docs/install.html 将下载的压缩包解压,我解压到了D盘 命令行窗口,cd到程序目录 控制台模式启动: .\bin ...

  9. vim命令行模式常见快捷方式

    普通模式下的快捷键 快捷键 说明 i insert, 在光标所在处输入 I 在当前光标所在行的行首输入 a append, 在光标所在处后面输入 A 在当前光标所在行的行尾输入 o 在当前光标所在行的 ...

  10. idea 导入 open项目

    导入  import Project 选择你的项目目录 (位置可以直接是svn下下来的项目目录 不用新建空项目或者目录) 如果有提示直接yes  没有拉到 一路next 如果提示  覆盖就ok (一路 ...