CORS了解与VUE跨域解决
1、CORS了解
CORS通信得关键地方就是服务器,只要服务器实现了CORS接口,就可以实现跨域通信
浏览器将CORS请求分为两大类:简单请求、非简单请求
简单请求
基本介绍
同时满足以下条件就是简单请求
一、 请求方法是以下三种方法之一:
HEAD
GET
POST二、HTTP的头信息不超出以下几种字段:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
其中在第一个条件中的请求方式为HEAD的时候,只请求页面的首部
HEAD 方法是向服务器发出指定资源的请求,只不过索要的只是响应头,响应体将不会被返回。这一方法可以再不必传输整个响应内容的情况下,就可以获取包含在响应小消息头中的元信息。
第二个条件中字段详解:
Accept: text/html,image/apng //代表客户端希望接受的数据类型是html或者是png图片类型
Accept-Language: zh-CN,zh;q=0.9 //代表客户端可以支持语言zh-CN或者zh(值得一提的是q(0~1)是优先级权重的意思,不写默认为1,这里zh-CN是1,zh是0.9)
Content-Language:WEB 服务器告诉浏览器自己响应的对象的语言。
Content-Type: WEB 服务器告诉浏览器自己响应的对象的类型。
基本流程
对于简单请求,浏览器直接发送CORS请求,即在头部信息中,添加一个origin(协议 + 域名 + 端口)字段,服务器根据这个值,决定是否同意这个请求
当Origin
指定的源,不在许可范围内,服务器会返回一个正常的HTTP回应。浏览器发现,这个回应的头信息没有包含Access-Control-Allow-Origin
字段(详见下文),就知道出错了,从而抛出一个错误,被XMLHttpRequest
的onerror
回调函数捕获。注意,这种错误无法通过状态码识别,因为HTTP回应的状态码有可能是200。
也就是说如果允许请求,服务器返回的响应体会包含Access-Control-Allow-Origin字段,反之
浏览器:携带origin发送给服务器
服务器:判断origin指定源是否在许可范围内
Access-Control-相关字段
Access-Control-Allow-Origin:
Access-Control-Allow-Credentials:
Access-Control-Expose-Headers:
Content-Type:
1、Access-Control-Allow-Origin
该字段是必须的。它的值要么是请求时Origin
字段的值,要么是一个*
,表示接受任意域名的请求。
2、Access-Control-Allow-Credentials
该字段可选。它的值是一个布尔值,表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求之中。设为true
,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器。这个值也只能设为true
,如果服务器不要浏览器发送Cookie,删除该字段即可。
3、Access-Control-Expose-Headers
该字段可选。CORS请求时,XMLHttpRequest
对象的getResponseHeader()
方法只能拿到6个基本字段:Cache-Control
、Content-Language
、Content-Type
、Expires
、Last-Modified
、Pragma
。如果想拿到其他字段,就必须在Access-Control-Expose-Headers
里面指定。
非简单请求
基本介绍
简单的说就是除去简单请求之外的就是非简单请求
非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUT
或DELETE
,或者Content-Type
字段的类型是application/json
。
非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为**“预检”**请求(preflight)。
浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest
请求,否则就报错。
比如:
var url = 'http://api.alice.com/cors';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();
该代码中,HTTP请求方法是PUT,并且发送一个自定义头部信息X-Custom-Header
发送预检请求
浏览器就会发现,这是一个非简单请求,就会自动发送一个 预检请求,向服务器确认是否能这样请求,下面是 预检信息的HTTP头部信息
OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
预检请求用的方法是OPTIONS
,表示这个请求是来询问的,其中Origin
,表示来自那个请求源
1、Access-Control-Request-Method
该字段是必须的,用来列出浏览器的CORS请求会用到哪些HTTP方法,上例是PUT
。
2、Access-Control-Request-Headers
该字段是一个逗号分隔的字符串,指定浏览器CORS请求会额外发送的头信息字段,上例是X-Custom-Header
。
注意:预检请求是浏览器发送给服务器时候的操作,这些信息也就是在请求体中的
预检请求回应
服务器在收到预检请求后,对Origin
、Access-Control-Request-Method
和Access-Control-Request-Headers
字段以后,确认允许跨源请求,就可以做出回应。
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain
上面就是HTTP响应体中的内容,关键的是Access-Control-Allow-Origin
字段,表示http://api.bob.com
可以请求数据。该字段也可以设为星号,表示同意任意跨源请求。
Access-Control-Allow-Origin: *
如果服务器否定了"预检"请求,会返回一个正常的HTTP回应,但是没有任何CORS相关的头信息字段。这时,浏览器就会认定,服务器不同意预检请求,因此触发一个错误,被XMLHttpRequest
对象的onerror
回调函数捕获。控制台会打印出如下的报错信息。
XMLHttpRequest cannot load http://api.alice.com.
Origin http://api.bob.com is not allowed by Access-Control-Allow-Origin.
服务器回应的其他CORS相关字段如下。
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000
1、Access-Control-Allow-Methods
该字段必需,它的值是逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法。注意,返回的是所有支持的方法,而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。
2、Access-Control-Allow-Headers
如果浏览器请求包括Access-Control-Request-Headers
字段,则Access-Control-Allow-Headers
字段是必需的。它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段,不限于浏览器在"预检"中请求的字段。(我对这里的理解其实就是返回了刚开始发送给服务器的自定义请求头)
3、Access-Control-Allow-Credentials
该字段与简单请求时的含义相同。
4、Access-Control-Max-Age
该字段可选,用来指定本次预检请求的有效期,单位为秒。上面结果中,有效期是20天(1728000秒),即允许缓存该条回应1728000秒(即20天),在此期间,不用发出另一条预检请求。
注意:只有当预检请求通过后,浏览器才会发起正常的CORS请求,和简单请求一样,会有一个Origin
头信息字段。服务器的回应,也都会有一个Access-Control-Allow-Origin
头信息字段。
发起简单请求
正常的CORS请求
PUT /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
X-Custom-Header: value
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
浏览器收到的响应体:
Access-Control-Allow-Origin: http://api.bob.com
Content-Type: text/html; charset=utf-8
其中Access-Control-Allow-Origin
字段是每次回应都必定包含的。
withCredentials 属性
CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器,一方面要服务器同意,指定Access-Control-Allow-Credentials
字段。
Access-Control-Allow-Credentials: true
在aixos中也要进行配置
withCredentials: true, // 设置携带凭证
需要注意的是,如果要发送Cookie,Access-Control-Allow-Origin
就不能设为星号,必须指定明确的、与请求网页一致的域名。同时,Cookie依然遵循同源政策,只有用服务器域名设置的Cookie才会上传,其他域名的Cookie并不会上传,且(跨源)原网页代码中的document.cookie
也无法读取服务器域名下的Cookie。
以上都是对CORS的简单相关知识介绍,看完之后我自己也有疑惑,我们发送的、接收得都是请求部分、响应部分,那代码与请求得转换是什么样得呢?下面举出简单得列子
代码搭配理解
这里是发送的一个POST请求
function sendData() {var request = new XMLHttpRequest(),payload = ......;request.open('POST', 'http://public-data.com/someData', true);request.setRequestHeader('X-CUSTOM-HEADER', 'custom_header_value');request.onreadystatechange = handler;request.send(payload);}
在执行了该段代码之后(可以看出这是一个非简单的请求,会先进行预检的请求发送),浏览器首先发出的请求将如下所示:
OPTIONS /someData/ HTTP/1.1Host: public-data.com......Origin: http://ambergarden.comAccess-Control-Request-Method: POSTAccess-Control-Request-Headers: X-CUSTOM-HEADER
在服务端看到该OPTIONS请求后,其将分析该请求中的内容并返回一个响应,以通知浏览器是否允许向它发送数据:
HTTP/1.1 200 OKAccess-Control-Allow-Origin: http://ambergarden.comAccess-Control-Allow-Methods: POST, GET, OPTIONSAccess-Control-Allow-Headers: X-CUSTOM_HEADERAccess-Control-Max-Age: 1728000
浏览器分析该响应并了解到其被允许向服务端发送数据以后,其才会向服务端发送真正的POST请求:
POST /someData/ HTTP/1.1Host: public-data.comX-CUSTOM-HEADER: custom_header_value......[Payload Here]
而服务端则会接收并处理该请求(也就是响应体中数据):
HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://ambergarden.com
Content-Type: application/xml
......[Payload Here]
参考博文:
https://www.ruanyifeng.com/blog/2016/04/cors.html
https://www.cnblogs.com/loveis715/p/4592246.html
https://www.jianshu.com/p/7faaf7e4ec06?utm_campaign=hugo
2、VUE跨域问题解决
也就是在根目录下的vue.config.js的配置文件,然后在里面配置proxy,代码如下:
module.exports = {devServer: {proxy: {'/api': { // 这里最好有一个 /target: 'http://192.168.119.193:8080', // 后台接口域名changeOrigin: true, // 是否允许跨域 设置为truepathRewrite: { // 重写域名'^/api': '/'}},}}
}
在配置完之后我们用新的域名来代替原来的ip和端口就行了,如下
// 比如原来我们这样访问接口
this.$axios.get("http://192.168.119.193:8080/addUser").then ((response) => {// handle success}).catch((error) => {// handle error})// 现在将接口替换成这样就行了
this.$axios.get("/api/addUser").then ((response) => {// handle success}).catch((error) => {// handle error})
这种解决办法的其他博文也都大同小异,参考博文如下
https://blog.csdn.net/weixin_45989632/article/details/115252287?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-0.pc_relevant_antiscan&spm=1001.2101.3001.4242.1&utm_relevant_index=3
CORS了解与VUE跨域解决相关推荐
- vue跨域解决的几种方案
vue跨域解决的几种方案 一.开发环境解决跨域方法 平时使用vue开发的时候,大多会使用vue-cli搭建项目,在vue-cli搭建的项目中有一个配置文件vue.config.js,可以在该文件中进行 ...
- vue跨域解决及打包
打包之前需要修改如下配置文件: 配置文件一:build>>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件( ...
- Vue 跨域下载或读取文件
image.png 下载文件 export async function download(file_url, file_name) {let res = await Axios({method: & ...
- vue跨域问题解决方法
vue跨域解决方法 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报"No 'Access-Control-Allow-Origin' ...
- vue跨域 Uncaught (in promise) Proxy error: Could not proxy request xxx from xxx to xxx (EPROTO)解决办法
vue跨域 (EPROTO)解决办法 最初看到这个错误,我是一头雾水,修改了无数次vue代理服务器(devServer)的配置,也再三确认了服务器上接口的正确性.直到看到了错误码. 网络上大部分的错误 ...
- vue一级分类和耳机分类_【Vue+DRF生鲜电商】10.商品分类层级获取,Vue跨域请求商品分类...
欢迎访问我的博客专题 源码可访问 Github 查看 DRF实现商品分类获取 实现商品分类层级结构显示 商品类别ViewSet 在商品类别中,不需要对类别进行分页,因为类别的数据量不大,只要在数据量很 ...
- Nginx跨域解决配置示例
简介 在日常学习和工作开发中,需要请求两个不同配置的请求经常存在,本文介绍如果还使用Nginx配置解决其跨域问题 相关理论 首先需要了解什么是跨域,下面的两个文章说的很好,请仔细阅读后,然后自己去动手 ...
- Vue跨域配置proxyTable问题
最近在做一个前后端分离的毕设,在前端向后端发送get请求时遇到了Vue跨域的问题. been blocked by CORS policy: No 'Access-Control-Allow-Orig ...
- 什么是跨域 解决跨域的方法 (分分钟)
一 ,为什么会出现跨域问题 处于浏览器的同原则策略(Sameoriginpolicy)是一种约定,它是浏览器最核心 也是基本的安全共功能,如果缺少了同源策略,则浏览器的正常功能可能会 收到影响.可以说 ...
最新文章
- 又学一招,记录之,数字日期互转
- 济南学习 Day2 T2 am
- oracle 修改序列末值,当ViewModel值更改时,用户界面未更新
- 驻华大使亲自带货 卢旺达咖啡豆成春节热销“洋年货”
- FFmpeg源代码结构图 - 编码
- android开发比例图表,Android开发中如何使用绘制图表
- Java语言中:switch语句经典习题
- 腾讯视频怎么获得html代码,如何获取腾讯视频等九大视频网站的视频分享代码...
- python k线斜率计算_python求线性回归斜率
- 自动登录163邮箱的批处理
- Java 中文按拼音进行排序
- 号外号外!兹有第一届区块链技术及应用峰会(BTA)·中国首轮议题抢鲜看
- Windows XP 语言栏丢失
- 【重要】国庆节快乐!有三AI所有课程限时7天优惠
- P2002 消息扩散(图论 Tarjan缩点)
- 计算机ps2定义,软件硬件界面接口定义 bt656 硬件接口定义
- 用python实现词语接龙游戏
- 利用U盘里的GHOST文件恢复系统
- 资深程序员才能看懂的幽默时刻
- Q2营收净利润双降 后疫情时代百事可乐的“快乐水”生意有多难?