由于后端需要通过请求取前端中的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. Java使用FileOutputStream写入文件

    From: http://beginnersbook.com/2014/01/how-to-write-to-a-file-in-java-using-fileoutputstream/ /* 使用F ...

  2. CSS Selectors

    CSS selectors are used to "find" (or select) HTML elements based on their element name, id ...

  3. LeetCode 47. 全排列 II(Permutations II)

    题目描述 给定一个可包含重复数字的序列,返回所有不重复的全排列. 示例: 输入: [1,1,2] 输出: [ [1,1,2], [1,2,1], [2,1,1] ] 解题思路 类似于LeetCode4 ...

  4. LeetCode 74. 搜索二维矩阵(Search a 2D Matrix)

    题目描述 编写一个高效的算法来判断 m x n 矩阵中,是否存在一个目标值.该矩阵具有如下特性: 每行中的整数从左到右按升序排列. 每行的第一个整数大于前一行的最后一个整数. 示例 1: 输入: ma ...

  5. docker启动redis并使用java连接

    一.先查找镜像 docker search redis 二.拉取镜像 docker pull redis三.等待拉取完毕 四.查看拉去的镜像 docker iamges 五.运行redis 连接1:h ...

  6. GreyMagic

    hearthbuddy中的一段代码 // Token: 0x06001A79 RID: 6777 RVA: 0x000DD024 File Offset: 0x000DB224 internal In ...

  7. 【转】unity3d优化总结篇

    https://blog.csdn.net/weixin_33733810/article/details/94610167 某些技术或建议有些过时,但也值得参考 另外,关于如何设置不同layer的裁 ...

  8. 评【TED】陆克文:中美注定要冲突吗?

    陆克文TED演讲地址:https://www.bilibili.com/video/av2196100?from=search&seid=6953438337852168205 实话说,这篇材 ...

  9. CSS 有序或者无序列表的前面的标记 list-style-type 属性

    例子: <html> <head> <style type="text/css"> ul.none{list-style-type:none} ...

  10. 对docker一些认知

    关于docker(应用容器引擎) docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化.容器是完全使用 ...