前后端分离,求n种解决跨域的问题的方法。

前后端分离,求n种解决跨域的问题的方法。

1.ajax的data属性为jsonp

2.设置代理或者反向代理

首先后台得允许跨域,否则前端怎么写都白搭

一. jsonp
<!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>

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('服务器启动成功')
    }
})


二.CORS解决跨域

"Access-Control-Allow-Headers": "*", //设置请求头
"Access-Control-Allow-Origin": "*",  //允许携带哪个头访问,即允许前端设置的自定义头字段传递数据
"Access-Control-Allow-Methods":  "*",  //允许携带哪个方法访问,即允许所设置的请求方式请求
"Access-Control-Max-Age": "*",  //可以设置Access-Control-Max-Age头来设置多少秒之内不发请求

三.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("我是后端数据");
    })
})

 

四. 通过修改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对象。