解决跨域问题的几种方法

2021-02-24 本文已影响0人转移到CSDN名字丹丹的小跟班

跨域的原因主要是同源政策的影响，所谓同为政策就是需要页面服务器协议，端口，域名都一样。注意：子域不同，也叫跨。

当客户端向服务端发送请求后，服务端接受到请求，并返回相应的数据给客户端。举例客户端为浏览器，当客户端接收到服务端返回的数据的时候，根据Netscape公司提供的安全策略——同源策略，会判定客户端与服务端的协议、端口和域名是否一致，如果一致，才能够将数据给客户端的脚本，也就是js代码才能接受到数据。

注意：跨域能返回到浏览器，并且能在控制台preview看到结果，但是不能返回到js脚本。

一. jsonp

目的:可以让所有的人都能去访问慎用
原理:超链接(href) 表单(action) 图片(src) script(src) 不考虑跨域问题,用服务器地址代替路径
使用方法:
1)服务端配合前端,res.wirte()写前端规定的函数名
2)前端发送数据时,发送回调函数,服务端处理数据后,直接执行函数名

服务器代码

const http = require('http')
let server = http.createServer((req, res) => {
    if(req.url === '/index') {
        res.write('res("后端返回的数据")')
    }
    res.end()
})
server.listen(3333, (err) => {
    if(!err) {
        console.log('服务器启动成功')
    }
})

html代码

<!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>
    <button type="submit">提交</button>
    <script>
      let btn = document.getElementsByTagName("button")[0];
      btn.onclick = function () {
        let scr = document.createElement("script");
        scr.src = "http://127.0.0.1:3333/index";
        document.body.appendChild(scr);
      };
      // 设置后台调用的方法，以便接收数据
      function res(data) {
        console.log(data);
      }
    </script>
  </body>
</html>

测试效果

二.CORS解决跨域

CORS即“跨域资源共享”，这是一种最常用的跨域实现方式，一般需要后端人员在处理请求数据的时候，添加允许跨域的相关请求头信息。大致思路是这样的：首先获取请求对象的信息，比如Origin字段，通过预先配置的参数判断请求是否合法，然后设置相应对象response的头信息，实现跨域资源请求

"Access-Control-Allow-Headers": "*", //设置请求头

"Access-Control-Allow-Origin": "*",  //允许携带哪个头访问，即允许前端设置的自定义头字段传递数据

"Access-Control-Allow-Methods":  "*",  //允许携带哪个方法访问，即允许所设置的请求方式请求

"Access-Control-Max-Age": "*",  //可以设置Access-Control-Max-Age头来设置多少秒之内不发请求

"Access-Control-Max-Age": "*",  //可以设置Access-Control-Max-Age头来设置多少秒之内不发请求

"Access-Control-Allow-Credentials": true, //允许携带cookie、authorization等，及携带凭证请求头。即响应头表示是否可以将对请求的响应暴露给页面。

服务端

const http = require("http");

let server = http.createServer((req, res) => {
  res.writeHead(200, {
    "Access-Control-Allow-Headers": "*",
    "Access-Control-Allow-Origin": "*",
  });
  if (req.url === "/index") {
    res.write("收到请求");
  }
  res.end();
});

server.listen(3333, (err) => {
  if (!err) {
    console.log("服务器启动成功");
  }
});

html

<!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>
    <button type="submit">提交</button>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      let btn = document.getElementsByTagName("button")[0];
      btn.onclick = function () {
        axios({
          method: 'get',
          url: 'http://127.0.0.1:3333/index'
        }).then(res => {
          console.log(res)
        })
      };
    </script>
  </body>
</html>

三.WebSocket

服务器

let WebSocket = require("ws");
let wss = new WebSocket.Server({
    port: 3333
});
wss.on("connection", function (ws) { //先连接
    ws.on("message", function (data) { //用message来监听客户端发来的消息
        console.log(data);
        ws.send("我是后端数据");
    })
})

html

<!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>
    <button type="submit">提交</button>
    <script>
      let btn = document.getElementsByTagName("button")[0];
      btn.onclick = function () {
        let socket = new WebSocket("ws://localhost:3333/index"); //ws协议是webSocket自己创造的
        socket.onopen = function () {
          socket.send("我是前端数据");
        };
        socket.onmessage = function (e) {
          console.log(e.data);
        };
      };
    </script>
  </body>
</html>

前端展示

后端展示

四. 通过修改document.domain来跨子域

子域中无法获取父域的数据的时候就可以利用document.domain都设置成相同的域名就可以完成。但是要注意的是，document.domain的设置是有限制的，我们把document.domain设置成自身或者更高一级的父域，且主域必须相同。
例如：a.b.example.com中某个文档的document.domaiin可以设成a.b.example.com、b.example.com、example.com中的任意一个，但是不可以设成c.a.b.example.com，因为这是当前作用于的子域，也不能设成baidu.com，因为主域已经不相同了。

五. 使用HTML5中新引入的window.postMessage方法来跨域传递数据

window.postMessage(message, targetOrgin)方法是html5新引进的特性，可以使用它来想其他的window对象发送消息，无论这个window对象是属于同源或者不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

调用postMessage方法的window对象是指要接受消息的哪一个window对象，该方法的第一个参数message为要发送的消息，类型只能为字符串；第二个参数targetOrgin用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符*。

需要接收消息的window对象，可是通过监听自身的message时间来获取传过来的消息，消息内容存储在该事件对象的data属性中。

六. XDomainRequest

在ie8,9中，有XDomainRequest对象可以实现跨域请求。这个对象拥有onerror，onload，onprogress，ontimeout四个事件，abort，open，send三个方法，contentType， responseText，timeout三个属性。具体参见XDomainRequest对象。

XDomainRequest对象有很多限制，例如只支持get、post方法、不能自定义请求的header头、不能携带cookie、只支持text/plain类型的内容格式等等。具体参见XDomainRequest对象限制。

因此虽然XdomainRequest作为ie8、9中的一种跨域手段，但是适用的业务场景还是比较局限的。