简单设置,解决使用webpack前后端跨域发送cookie的问题

最近用vue来做项目,用webpack来做前端自动化构建。webpack-dev-server会在本地搭建一个服务器,在和后端调试的时候,就会涉及到跨域的问题。

刚开始时,没有用vue-cli来构建项目,而是参考了github上的vue-vueRouter-webpack来构建。看网上的资料,vue-cli可以通过配置代理来解决跨域的问题:

proxyTable: {
  ‘/list‘: {
    target: ‘http://api.xxxxxxxx.com‘,
    changeOrigin: true,
    pathRewrite: {
      ‘^/list‘: ‘/list‘
    }
  }
}

具体可以看这篇文章:Vue-cli proxyTable 解决开发环境的跨域问题

假如不用代理,那需要怎样设置呢?

最简单的方法是服务端将响就头设置成Access-Control-Allow-Origin:域名,如果客户端发送请求时,不需要携带cookie等信息,可以设置成Access-Control-Allow-Origin:*,表示任何域都可以向服务端发送请求,客户端不需要任何配置,就可以进行跨域调试了。

但是一般的网站,都需要向后端发送cookie来进行身份验证,此时,服务器还需向响应头设置Access-Control-Allow-Credentials:true,表示跨域时,允许cookie添加到请求中。设置Access-Control-Allow-Credentials:true后,要将Access-Control-Allow-Origin指定到具体的域,否则cookie不会带到客户端,例如设置成Access-Control-Allow-Origin:http://192.168.0.1:8088,http://192.168.0.1:8088是前端服务器的域名,这就要求用webpack的时候,要指定具体的域来启动,不要直接用localhost

要向后端发送cookie,前端也需要有相应的配置。我在项目中,引用了fetch的polyfill,直接用fetch来发送ajax请求,需要将credentials设置成include,表示允许跨越传递cookie,不要将credentials设置成same-origin,如果设置成same-origin,只会在同源的时候发送cookie。另外还要将withCredentials设为true。

jquery的设置如下:

xhrFields: {
    withCredentials: true
},
crossDomain: true,

为了勉励自己多些总结,开了个微信公众号(front-end-article),最近都在用vue做项目,近期应该会写一些关于vue的文章。有兴趣可以关注一下哦,或者投稿也可以,多多交流哈:

时间: 2024-07-30 10:16:58

简单设置,解决使用webpack前后端跨域发送cookie的问题的相关文章

cors跨域资源共享---解决前后端跨域问题

Cross-Origin Resource Sharing (CORS) ,定义了在跨域访问资源时浏览器和服务器之间如何通信.CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方,从而决定请求或响应成功与否. 解决方法: ①后端加响应头 header("Access-Control-Allow-Origin: *"); header('Access-Control-Allow-Credentials: true'); header('Access-Contro

用Nginx代理请求,处理前后端跨域

自从前端spa框架出现后,都是前后端分离开发了.我们在开发的时候难免会遇到跨域的问题.跨域这种问题解决的方法基本都是在服务端实现的.以java为例,我知道的有3种方法处理跨域: 1.使用 @CrossOrigin 注解对每一个接口进行跨域处理,缺点是比较麻烦 @CrossOrigin(origins ="*") @RequestMapping(value = "/test", method = RequestMethod.GET) public String tes

java 前后端跨域问题解决

前端页面部署在nginx 上 ,后端代码部署在服务器上 ,前端访问后台会出现跨域问题 新建一个过滤器 /** * 开放跨域权限 * * */@Slf4jpublic class testFilter implements Filter { public void init(FilterConfig filterConfig) throws ServletException { } public void doFilter(ServletRequest var1, ServletResponse

springboot 解决前后端跨域

项目web层创建文件夹名字随便 和controller平级 在文件夹下创建类 名字随意  我是在tools文件夹下创建了一个叫CorsConfig的类,代码如下 package com.huyuqiang.web.tools; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframew

springboot2.1.3 配置前后端跨域问题

很简单,创建一个配置类即可,如下: package com.app.gateway.common.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebM

解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题

问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, 既然每次请求都是一个新的会话, 那我们去获取session的时候自然就是null了. 解决办法如下: 环境: vue 2.0 springboot 2.1.6 一.前端部分 1.  在vue引入axios的位置添加以下代码 import axios from 'axios' axios.defau

Ajax跨域请求COOKIE无法带上的解决办法

原生ajax请求方式: var xhr = new XMLHttpRequest(); xhr.open("POST", "http://xxxx.com/demo/b/index.php", true); xhr.withCredentials = true; //支持跨域发送cookies xhr.send(); jquery的ajax的post方法请求: $.ajax({ type: "POST", url: "http://xx

跨域带cookie失效的解决方案

在webpack的tableproxy那儿配置完跨域以后,想给cookie添加domain以便请求的时候带上cookie domain为localhost,cookie不会失效,但是一但改成baidu.com的时候,就失效了,Storage的cookie没掉了. 解决跨域带cookie方案如下: 修改host(windows版)目的:这样就可以去掉proxytable这个转发层了(由express服务器代理的)C:\Windows\System32\drivers\etcwin10: hosts

跨域共享cookie

1. JSP中Cookie的读写 Cookie的本质是一个键值对,当浏览器访问web服务器的时候写入在客户端机器上,里面记录一些信息.Cookie还有一些附加信息,比如域名.有效时间.注释等等. 下面是一个jsp中写入读取Cookie的测试:在顶级域名中写入Cookie,在子域名中读取,目的是实现一个分布系统的单点登录. 两个jsp中读写代码如下: 写入: <% Cookie cookie = newCookie("write","cookie_write")