6种解决跨域方案，今天全告诉你了开发者社区

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

6种解决跨域方案，今天全告诉你了

当前页面url	被请求页面url	是否跨域	原因
http://www.test.com/	http://www.test.com/index.html	否	同源（协议、域名、端口号相同）
http://www.test.com/	https://www.test.com/index.html	跨域	协议不同（http/https）
http://www.test.com/	http://www.baidu.com/	跨域	主域名不同（test/baidu）
http://www.test.com/	http://blog.test.com/	跨域	子域名不同（www/blog）
http://www.test.com:8080/	http://www.test.com:7001/	跨域	端口号不同（8080/7001）

class Jsonp {
  constructor(req) {
    this.url = req.url;
    this.callbackName = req.callbackName;
  create() {
    const script = document.createElement("script");
    const url = `${this.url}?callback=${this.callbackName}`;
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
new Jsonp({
  url: "http://127.0.0.1:8000/",
  callbackName: "getMsg"
}).create();
function getMsg(data) {
  data = JSON.parse(data);
  console.log(`My name is ${data.name}, and ${data.age} years old.`);
}

const http = require("http");
const querystring = require("querystring");
const server = http.createServer((req, res) => {
  const url = req.url;
  const query = querystring.parse(url.split("?")[1]);
  const { callback } = query;
  const data = {
    name: "Yang Min",
    age: "8"
  res.end(`${callback}('${JSON.stringify(data)}')`);
server.listen(8000);

My name is Yang Min, and 8 years old.

http://127.0.0.1:8000/?callback=getMsg

getMsg("{name: 'Yang Min', age: '8'}");

const jsonp = ({ url, params, callbackName }) => {
  const generateURL = () => {
    let dataStr = "";
    for (let key in params) {
      dataStr += `${key}=${params[key]}&`;
    dataStr += `callback=${callbackName}`;
    return `${url}?${dataStr}`;
  return new Promise((resolve, reject) => {
    // 初始化回调函数名称
    callbackName =
      callbackName ||
      "cb" +
        Math.random()
          .toString()
          .replace(".", "");
    let scriptEle = document.createElement("script");
    scriptEle.src = generateURL();
    document.body.appendChild(scriptEle);
    // 绑定到 window 上，为了后面调用
    window[callbackName] = data => {
      resolve(data);
      // script 执行完了，成为无用元素，需要清除
      document.body.removeChild(scriptEle);
jsonp({
  url: "http://127.0.0.1:8000/",
  params: {
    name: "Yang Min",
    age: "8"
  callbackName: "getData"
  .then(data => JSON.parse(data))
  .then(data => {
    console.log(data); // {name: "Yang Min", age: "8"}
  });

const http = require("http");
const querystring = require("querystring");
const server = http.createServer((req, res) => {
  const url = req.url;
  const query = querystring.parse(url.split("?")[1]);
  const { name, age, callback } = query;
  const data = {
    name,
  res.end(`${callback}('${JSON.stringify(data)}')`);
server.listen(8000);

function getAjaxData() {
  $.ajax({
    type: "get",
    async: false,
    url: "http://127.0.0.1:8000/",
    dataType: "jsonp", //由 JSON 改为 JSONP
    jsonp: "callback", //传递给请求处理程序或页面的，标识jsonp回调函数名(一般为:callback)
    jsonpCallback: "getData", //callback的function名称，成功就会直接走 success 方法
    success: function(data) {
      data = JSON.parse(data);
      console.log(`My name is ${data.name}, and ${data.age} years old.`);
    error: function() {
      console.log("Error");
getAjaxData();

function getAjaxData() {
  const def = $.ajax({
    type: "get",
    async: false,
    url: "http://127.0.0.1:8000/",
    dataType: "jsonp",
    jsonp: "callback",
    jsonpCallback: "getData"
    .done(data => {
      data = JSON.parse(data);
      console.log(`My name is ${data.name}, and ${data.age} years old.`);
    .fail(err => {
      console.log(err);
}

let xhr = new XMLHttpRequest();
xhr.withCredentials = true;

Access-Control-Expose-Headers: aaa

const url = "http://127.0.0.1:8000";
const data = { username: "example" };
const myHeaders = new Headers({
  "Content-Type": "text/plain"
fetch(url, {
  method: "POST",
  headers: myHeaders,
  body: JSON.stringify(data),
  mode: "cors"
  .then(res => res.json())
  .then(res => {
    console.log(JSON.parse(res.postData)); //{username: "example"}
  });

const http = require("http");
const server = http.createServer((req, res) => {
  res.writeHead(200, {
    "Content-Type": "text/plain",
    "Access-Control-Allow-Origin": "*"
  let resData = {};
  let postData = [];
  req.on("data", chunk => {
    postData.push(chunk);
  req.on("end", () => {
    resData.postData = Buffer.concat(postData).toString();
    res.end(JSON.stringify(resData));
server.listen(8000);

const url = "http://127.0.0.1:8000";
const data = { username: "example" };
const myHeaders = new Headers({
  "X-Custom-Header": "xxx"
fetch(url, {
  method: "PUT", // 改成 PUT
  headers: myHeaders,
  body: JSON.stringify(data),
  mode: "cors"
  .then(res => res.json())
  .then(res => {
    console.log(JSON.parse(res.postData)); //{username: "example"}
  });

res.writeHead(200, {
  "Content-Type": "text/json",
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "PUT, POST, GET",
  "Access-Control-Allow-Headers": "X-Custom-Header",
  "Access-Control-Max-Age": 2000,
  "Access-Control-Allow-Credentials": true
});

OPTIONS / HTTP/1.1
Host: 127.0.0.1:8000
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: x-custom-header
Origin: http://127.0.0.1:8001

HTTP/1.1 200 OK
Content-Type: text/json
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: PUT, POST, GET
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Max-Age: 2000
Access-Control-Allow-Credentials: true
Date: Fri, 27 Mar 2020 08:16:58 GMT
Connection: keep-alive
Transfer-Encoding: chunked

server {
  listen  80;
  server_name  client.com;
  location /api {
    proxy_pass server.com;
}

const socket = new WebSocket("ws://localhost:8080");
socket.addEventListener("open", function(event) {
  console.log("Connection open ...");
  socket.send("Hello Server!");
socket.addEventListener("message", function(event) {
  console.log("Message from server: ", event.data);
  socket.close();
socket.addEventListener("close", function(event) {
  console.log("Connection closed.");
});

// 服务端
const WebSocket = require("ws");
const wss = new WebSocket.Server({ port: 8080 });
wss.on("connection", function connection(ws) {
  ws.on("message", function incoming(message) {
    console.log("received: %s", message);
  ws.send("something");
});

Connection open ...
Message from server:  something
Connection closed.

received: Hello Server!

<body>
  <h1>Hi, this is A html.</h1>
  <iframe
    id="frame"
    src="http://www.test.com:8001/b.html"
    frameborder="0"
    onload="load()"
  ></iframe>
  <script>
    document.domain = "test.com"; //设置domain
    function load() {
      let frame = document.getElementById("frame");
      console.log(frame.contentWindow.data); // This is b html content.
  </script>
</body>

<body>
  <h1>Hi, this is B html.</h1>
  <script>
    document.domain = "test.com"; //设置domain
    var data = "This is b html content.";
  </script>
</body>

// 发送消息端
window.parent.postMessage("message", "http://test.com");
// 接收消息端
var mc = new MessageChannel();
mc.addEventListener("message", event => {
  var origin = event.origin || event.originalEvent.origin;
  if (origin === "http://test.com") {
    console.log("验证通过");
});

<body>
  <h1>Hi, this is A html.</h1>
  <iframe
    id="frame"
    src="http://127.0.0.1:8001/b.html"
    frameborder="0"
    onload="load()"
  ></iframe>
  <script>
    function load() {
      let frame = document.getElementById("frame");
      frame.contentWindow.postMessage("我很帅", "http://127.0.0.1:8001");
      window.onmessage = function(event) {
        console.log("From b.html data: ", event.data);
  </script>
</body>

<body>
  <h1>Hi, this is B html.</h1>
  <script>
    window.onmessage = function(event) {
      var origin = event.origin || event.originalEvent.origin;
      if (origin === "http://127.0.0.1:8000") {
        console.log("From a.html data: ", event.data);

6种解决跨域方案，今天全告诉你了

6种解决跨域方案，今天全告诉你了

本文源自 公-众-号 IT老哥 的分享

前言

什么是跨域

跨域的解决方案

同源策略

Ajax 为什么不能跨域

JSONP 实现

一个 JSONP 的步骤实质

JSONP 封装

jQuery 中的 JSONP

JSONP 缺点

跨域资源共享 CORS

简单请求、非简单请求

CORS 如何工作

简单请求

举个栗子

非简单请求

预检请求

响应字段

Nginx Proxy方案

websocket方案

document.domain方案

postMessage方案