跨域解决方法 &简单请求 & 非简单请求

最新推荐文章于 2024-03-02 13:49:36 发布

某僧

最新推荐文章于 2024-03-02 13:49:36 发布

阅读量1.1k

点赞数 2

文章标签： nginx

本文链接：https://blog.csdn.net/weixin_45656737/article/details/120143861

版权

为什么会有跨域的问题以及解决方式
视频： click
文章：click

引起跨域的原因：
1、协议、域名、端口有一个不一样就构成了跨域。同源策略：从同一个源加载文档或脚本
2、js中自带跨域技能的标签：<img/><script></script><link>

解决办法：

CORS：跨站资源共享。使用自定义的HTTP头部让浏览器与服务器进行沟通。浏览器自动进行CORS通信，后端配置消息头：res.header(“Access-Control-Allow-Origin”,"*")该属性表示那些域名可以访问资源，通配符*表示所有网站都可以访问。支持所有请求方法。cors请求包括简单请求和非简单请求。

简单请求

请求方法是以下三种方法之一：HEAD GET POST

HTTP的头信息不超出以下几种字段：Accept Accept-Language Content-Type Last-Event-ID

Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

复杂请求

不满足以上条件

对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。

简单请求：浏览器在发出CORS 请求时会在 头信息 之中增加一个Origin字段。许可访问时服务器的返回会多出3个字段：

字段	必须/可选	解释
Access-Control-Allow-Origin	必须	允许跨域的源，要么是一个*，表示接受任意域名的请求。
Access-Control-Allow-Credentials	可选	表示服务器是否允许客户端发送Cookie。默认情况下，Cookie可以包含在请求中，一起发给服务器，如果服务器不需要浏览器发送Cookie，删除该字段即可。
Access-Control-Expose-Headers	可选	CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。如指定Access-Control-Expose-Headers: FooBar，则可通过getResponseHeader(‘FooBar’)获取FooBar字段的值。

在这里插入图片描述
不被许可时没有以上字段，会抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。

非简单请求的CORS请求会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。
"预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。请求头信息里面，关键字段是Origin，表示请求来自哪个源。浏览器先询问服务器，1、当前网页所在的域名是否在服务器的许可名单之中，2、可以使用哪些方法，3、可以使用那些头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。
在这里插入图片描述

在这里插入图片描述预检请求字段说明：

字段	是否可选	含义
Access-Control-Allow-Methods	必需	值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法,不单是浏览器请求的那个方法。这是为了避免多次"预检"请求
Access-Control-Allow-Headers	如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。	它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。
Access-Control-Allow-Credentials	可选	该字段与简单请求时的含义相同。
Access-Control-Max-Age	可选	用来指定本次预检请求的有效期，单位为秒。有效期内不用发出另一条预检请求。

预检请求通过后会发送正常请求，请求头由origin，响应头由Access-control-allow-origin，如图：
在这里插入图片描述

在这里插入图片描述

JSONP：是JSON with Padding的略称。利用script标签的src属性来实现跨域，将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信，仅支持get方法。
webSockets，不受同源策略影响，它不使用HTTP协议
Nginx，反向代理跨域，使用代理服务器。步骤：1. 把访问其它域的请求替换为本域的请求。2. 服务器端的动态脚本负责将本域的请求转发成实际的请求。更加直接，因为同源限制是浏览器实现的。click
通过修改document.domain来跨子域
使用window.name来进行跨域
使用HTML5中新引进的window.postMessage方法来跨域传送数据