前端跨域解决方案总结

最新推荐文章于 2024-07-08 10:53:15 发布

丑小鸭变黑天鹅

最新推荐文章于 2024-07-08 10:53:15 发布

阅读量4.7k

点赞数 3

分类专栏： nginx及跨域文章标签：前端 javascript json

本文链接：https://blog.csdn.net/qq_41880073/article/details/123032642

版权

本文详细介绍了前端跨域的概念、产生原因，以及包括JSONP、CORS、nginx代理、nodejs中间件代理在内的9种跨域解决方案。通过案例分析了各种解决方案的实现原理和应用场景，适合前端开发者参考。

摘要由CSDN通过智能技术生成

一、什么是跨域？

在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。

二、为什么会产生跨域

因为浏览器内部有一种约定叫做同源策略它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。

那么什么叫做同源策略呢？

同源策略是指在Web浏览器中，允许某个网页脚本访问另一个网页的数据，但前提是这两个网页必须有`相同的URI、主机名和端口号`，一旦两个网站满足上述条件，这两个网站就被认定为具有相同来源。此策略可防止某个网页上的恶意脚本通过该页面的文档对象模型访问另一网页上的敏感数据。

同源策略限制以下几种行为：

1、Cookie、LocalStorage 和 IndexDB 无法读取
2、DOM和JS对象无法获得
3、AJAX 请求不能发送

三、常见的跨域场景

在这里插入图片描述

四、9种跨域解决方案

1、JSONP跨域

1、概述

JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问

script 标签 src 属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。

2、实现流程

1、设定一个script标签

<script src="http://jsonp.js?callback=xxx"></script>

2、callback定义了一个函数名，而远程服务端通过调用指定的函数并传入参数来实现传递参数，将fn(response)传递回客户端

$callback = !empty($_GET['callback']) ? $_GET['callback'] : 'callback';
echo $callback.'(.json_encode($data).)';

3、客户端接收到返回的js脚本，开始解析和执行fn(response)

3、jsonp简单实现

一个简单的jsonp实现，其实就是拼接url，然后将动态添加一个script元素到头部
jsonp的缺点：只能发送get一种请求。

1)、原生JS实现

前端示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试</title>
</head>

<body>
  <script>
    let script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://localhost:5000/login?callback=handleCallback';
    document.head.appendChild(script);

    // 回调执行函数
    function handleCallback(res) {
   
      alert(JSON.stringify(res));
    }
  </script>
</body>

</html>

2）jquery Ajax实现：

$.ajax({
   
    url: 'http://localhost:5000/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",  // 自定义回调函数名
    data: {
   }
});

3）Vue axios实现：

axios.jsonp('http://localhost:5000/login', {
   
    params: {
   },
    jsonp: 'handleCallback'
}).then((res) => {
   
    console.log(res); 
})

4)、后端node.js代码：

const http = require('http');
const url = require('url');

const port = 5000;
const data = {
    'data': 'world' };

http.createServer(function (req, res) {
   
  console.log(req.url)  ///login?callback=handleCallback
  const params = url.parse(req.url, true);
  console.log(params)
  /* 
  Url {
    protocol: null,
    slashes: null,
    auth: null,
    host: null,
    port: null,
    hostname: null,
    hash: null,
    search: '?callback=handleCallback',
    query: [Object: null prototype] { callback: 'handleCallback' },
    pathname: '/login',
    path: '/login?callback=handleCallback',
    href: '/login?callback=handleCallback'
  }
 */
  if (params.query.callback) {
   
    console.log(params.query.callback); //handleCallback
    //jsonp
    let str = params.query.callback + '(' + JSON.stringify(data) + ')';
    //handleCallback({data: "world"})
    res.end(str);
  } else {
   
    res.end();
  }
}).listen(port, function () {
   
  console.log(`Server is running at port ${
     port}...`);
});

2、跨域资源共享（CORS）

1、概述

Cross-origin Resource Sharing 中文名称 “跨域资源共享” 简称 “CORS”，它突破了一个请求在浏览器发出只能在同源的情况下向服务器获取数据的限制。

它允许浏览器向跨域服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

2、跨域是浏览器还是服务器的限制？

从一段示例开始
创建 index.html 使用 fetch 调用 http://127.0.0.1:3011/api/data

<body>
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/fetch/3.0.0/fetch.min.js"></script> -->
  <script>
    fetch('http://127.0.0.1:3011/api/data');
  </script>
</body>

创建 client.js 用来加载上面 index.html。设置端口为 3010。

const http = require('http');
const fs = require('fs');
const PORT = 3010;
http.createServer((req, res) => {
   
  fs.createReadStream('index.html').pipe(res);
}