跨域

最新推荐文章于 2022-07-26 13:26:17 发布

Jayson柴

最新推荐文章于 2022-07-26 13:26:17 发布

阅读量190

点赞数

文章标签： ajax跨域问题

本文链接：https://blog.csdn.net/weixin_45678402/article/details/116449894

版权

跨域

一、什么是跨域？

跨域是指浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成，是浏览器对JavaScript实施的安全限制。跨域是指从一个域的网页去请求另一个域的资源；

同源策略：域名、协议、端口三者都相同；
URL是由协议、域名、端口以及路径组成；

二、限制同源策略的内容

cookie、localStorage等存储型内容；
DOM节点
Ajax请求发送后，结果被浏览器拦截；

三、允许跨域加载资源的三个含有src标签的

<img src=XXX>
<script src=XXX>
<link href=XXX>
链接到一个外部样式表，在HTML中，link标签没有结束标签；
link元素是空元素，仅包含属性；
此元素只能存在于head部分，不过可以出现任何次数
// href规定被链接文档的位置；
// rel规定当前文档与被链接文档之间的关系；
// 也就是指明链接进来的对象是什么东西：
// rel="stylesheet"表示一个外部加载的样式表
// type规定被链接文档的MIME类型
<link rel="stylesheet" type="text/css" 
href="/html/csstest1.css" >

四、跨域解决办法

Jsonp：只能解决get跨域

原理：利用script标签的src属性实现跨域，由服务端返回预先定义好的JavaScript函数的调用，并且将服务端数据以该函数参数的形式传递过来；
步骤：
1）创建一个script标签
2）script的src属性设置接口地址
3）接口参数必须带有一个自定义函数名，不然后台无法返回数据；
4）通过定义函数名去接受后台返回的数据；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
     initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<script>
    jsonp = (url, params, callBack) => {
      return new Promise((resolve,reject) => {
        let script = document.createElement('script');
        // 回调函数
        window[callBack] = function(data) {
            resolve(data);
            document.body.removeChild(script);
        }
        params = {...params, callBack} // wd=b&callBack=show
        let arrs = [];
        for(let key in params){
            arrs.push(`${key}=${params[key]}`);
        }
        script.src = `${url}?${arrs.join('&')}`;
        document.body.appendChild(script)
      })
    }
    //只能发送get请求，不支持post put delete
    //不安全xss攻击  不采用
    jsonp({
        url:'http://localhost:3000/say',
        params:{wd:'早上好'},
        callBack:'show'
    }).then(data => {
        console.log(data)
    })
</script>
</body>
</html>

let url = 'http://localhost:3000/say'
let callBack = "show"
let params = {wb: "早上好", wd: "晚上好"}
params = {...params, callBack} // wd=b&callBack=show
console.log(params)
 // { wb: '早上好', wd: '晚上好', callBack: 'show' }
let arrs = [];
for(let key in params){
    arrs.push(`${key}=${params[key]}`)
}
let src = `${url}?${arrs.join('&')}`
console.log(arrs) 
// [ 'wb=早上好', 'wd=晚上好', 'callBack=show' ]
console.log(src)
 // http://localhost:3000/say?wb=早上好
 // &wd=晚上好&callBack=show

CORS跨域资源共享： cross-origin resource sharing

CORS是一种ajax跨域请求资源的方式，允许浏览器向服务器发出XMLHttpRequest请求，从而克服ajax只能同源使用的限制；

原理：服务器设置Access-control-allow-origin HTTP响应头之后，浏览器将会允许跨域请求；

Access-control-allow-origin： *  	允许所有来源访问；
Access-control-allow-methods：POST，GET  	允许访问方式；

CORS需要浏览器和服务器同时支持，目前，所有浏览器都支持该功能，IE浏览器不能低于IE10；整个CORS通信过程，都是由浏览器自动完成的，不需要用户参与；

浏览器将CORS请求分为两类：简单请求（simple request）和非简单请求（not-so-simple request）

只要同时满足两大条件**，就属于简单请求**：

1）请求方法：head，get，post
2）http头信息不超出以下几种字段：

accept;
accept-language;
content-language
last-event-ID
content-type：只限于三个值application/x-www-form-urlencode、multipart/form-data、text/plain

简单请求：对于简单请求，浏览器直接发出CORS请求，具体来说，就是在头信息中，增加一个origin字段；

举例：浏览器发现跨源请求是简单请求，就自动在头信息之中，添加一个Origin字段；该字段用来说明，本次请求来自哪个源（协议——域名——端口），服务器根据这个值决定是否同意这次请求；

**GET /cors HTTP/1.1 **
**Origin: http://api.bob.com **
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0…

如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段（详见下文），就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。注意，这种错误无法通过状态码识别，因为HTTP回应的状态码有可能是200。

如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。

Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
(表示是否允许发送cookie，默认情况下，cookie不包括在CORS请求中；设为true，表示服务器明确许可：cookie可以包含在请求中，一起发给服务器，这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。)
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

上面的头信息之中，有三个与CORS请求相关的字段，都以Access-Control-开头。

非简单请求

1）预检请求：非简单请求是指对服务器有特殊要求的请求，比如请求方式是PUT或DELETE，Content-Type字段的类型是application/json。

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为“预检”请求；浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些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，表示请求来自哪个源。

2）预检请求的回应

服务器收到"预检"请求以后，检查了Origin、Access-Control-Request-Methods和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。

Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Content-Type: text/html; charset=utf-8
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000

3）正常请求和回应：

一旦服务器通过了"预检"请求，以后每次浏览器的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

与JSONP比较：

CORS与JSONP的使用目的相同，但是比JSONP更强大；
JSONP只支持GET请求；CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求资源。

设置document.domain
原理：相同主域名不同子域名下的页面，可以设置document.domain让他们同域；
此方案仅限主域相同，子域不同的跨域应用场景。
实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。

父窗口：(http://www.domain.com/a.html)

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
    document.domain = 'domain.com';
    var user = 'admin';
</script>

子窗口：(http://child.domain.com/b.html)

<script>
    document.domain = 'domain.com';
    // 获取父窗口中变量
    alert('get js data from parent ---> ' + window.parent.user);
</script>

Proxy代理

使用代理服务器（数据转发，服务器没有跨域要求）

代理服务器：
- 接收客户端请求；
- 将请求转发给服务器；
- 拿到服务器响应数据
- 将响应转发给客户端

proxy: {
    '/': {
        target: 'http://local.kua.com' 
        // 设置调用的接口域名和端口
        changeOrigin: true // 跨域
    }
}

import axios from "axios"
export default {
    mounted() {
        axios.get('index.php/index/kua')
        .then( res => {
            console.log(res)
        })
    }
}

Jayson柴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨域

跨域一、什么是跨域？跨域是指浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成，是浏览器对JavaScript实施的安全限制。跨域是指从一个域的网页去请求另一个域的资源；同源策略：域名、协议、端口三者都相同；URL是由协议、域名、端口以及路径组成；二、限制同源策略的内容cookie、localStorage等存储型内容；DOM节点Ajax请求发送后，结果被浏览器拦截；三、允许跨域加载资源的三个含有src标签的<img src=XXX><script src=
复制链接

扫一扫