简单设置,解决使用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的文章。有兴趣可以关注一下哦,或者投稿也可以,多多交流哈:
简单设置,解决使用webpack前后端跨域发送cookie的问题的更多相关文章
- 使用nginx反向代理处理前后端跨域访问
本文主要解决:使用nginx反向代理处理前后端跨域访问的问题 1.何为跨域访问? 以下类型为跨域访问 1)不同域名间访问 www.zuiyoujie.com和www.baidu.com 2)同域名不同 ...
- 用Nginx代理请求,处理前后端跨域
自从前端spa框架出现后,都是前后端分离开发了.我们在开发的时候难免会遇到跨域的问题.跨域这种问题解决的方法基本都是在服务端实现的.以java为例,我知道的有3种方法处理跨域: 1.使用 @Cross ...
- 前后端跨域 _ cross domain
1. 解决跨域既可以从前端, 也可以从后端. 参考好的网络资源: http://www.cnblogs.com/vajoy/p/4295825.html
- 设置请求头解决浏览器同源问题,ajx跨域获取cookie问题
思想: 添加过滤器 设置请求头 代码如下 import java.io.IOException; import javax.servlet.Filter; import javax.servlet.F ...
- vue解决前后端跨域问题
1/在config中index.js中 找到proxyTable在里面添加如下代码 proxyTable: { '/api': { target: 'https://api.douban.com/v2 ...
- springboot2.1.3 配置前后端跨域问题
很简单,创建一个配置类即可,如下: package com.app.gateway.common.config; import org.springframework.context.annotati ...
- 获取登录验证码失败及前后端不同域导致session丢失问题分析记录
前言 前两周在把兄弟公司的几个服务部署到我们公司测试环境服务器的时候又遇到了不少问题,因为是前后端分离的项目,所以这次也同样遇到了跨域问题,解决方式也跟上一回的不一样,这里就再来分析记录一下. 登录验 ...
- 解决前后端分离后的Cookie跨域问题
一. 前端Ajax关键配置 $.ajax({ type: "post", url: xxx, data: xxx, contentType: 'application/json', ...
- 解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题
问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, ...
随机推荐
- java 动态代理示例,带主要注释
Java proxy是基于反射,仅仅支持基于接口的动态代理. java 动态代理是一切架构的基础,必须了解. 废话少说,先上代码获得感性认识. 示例代码有主要注释. 接口: public interf ...
- unity初始篇 选择游戏对象
之前两任社长都在一直强调要写博客,一直没有写过,现在我已经踏上了博客的道路! 首先声明:本人才疏学浅,对unity认识不深,有错误的地方欢迎大家指出,在此谢过! 本文所说的选择对象,是指在游戏过程中动 ...
- 转载:oracle null处理
(1)NULL的基础概念,NULL的操作的基本特点NULL是数据库中特有的数据类型,当一条记录的某个列为NULL,则表示这个列的值是未知的.是不确定的.既然是未知的,就有无数种的可能性.因此,NULL ...
- 使用XmlDataDocument将数据存储到XML文档
string str = "Data Source=192.168.1.20;Initial Catalog=WebTest;User ID=sa;Password="; SqlC ...
- Web服务器常用设置
1.Tomcat浏览目录 找到安装目录下的文件/conf/web.xml, 找到以下配置节,将parame-value设置为true即可 <init-param> ...
- java 多线程(daemon)
package com.example; public class App { public static void main(String[] args) { DoDaemon d1 = new D ...
- ReentrantLock实现原理深入探究
前言 这篇文章被归到Java基础分类中,其实真的一点都不基础.网上写ReentrantLock的使用.ReentrantLock和synchronized的区别的文章很多,研究ReentrantLoc ...
- Windows UDP socket recvfrom返回10054错误的解决办法
现象: 在Windows 7系统上,A使用UDP socket,调用sendto函数向一个目标地址B发送数据,但是目标地址B没有接收数据,如果A此时立即调用recvfrom试图接收目标地址B发回的数据 ...
- redis数据结构整理(一)
摘要: 0.redis安装 1.redis的常用数据结构类型 1.1 String 1.2 List 1.3 Set 1.4 Sorted Set 1.5 Hash 2.redis是单进程单 ...
- Java-数组练习5
5.从键盘上输入一个正整数n,请按照以下五行杨辉三角形的显示方式, 输出杨辉三角形的前n行.请采用循环控制语句来实现. (三角形腰上的数为1,其他位置的数为其上一行相邻两个数之和.) 1 1 1 ...