前端、后端、服务器等不同方式解决跨域

Happy__汽水儿
21 阅读4分钟

什么是跨域请求？

跨域不是问题，是一种安全机制。浏览器有一种策略名为同源策略，同源策略规定了部分请求不能被浏览器所接受。

同源策略导致的跨域是浏览器单方面拒绝响应数据，也就是说我们可以发送请求，但是无法得到预期的响应，因为服务器端是处理完毕并做出了响应的。

跨域请求是指在Web应用程序中，使用一个域名的网页去请求另一个域名下的资源时，由于浏览器的同源策略限制，会出现跨域问题。为了解决跨域问题，可以采取以下配置方式：

一. ### JSONP（JSON with Padding）：JSONP是一种利用动态脚本元素来进行跨域请求的技术，它利用script标签的src属性可以跨域加载资源的特性来完成跨域请求。需要在服务器端返回JSONP格式的数据，并在客户端动态创建script标签来获取数据。

下面是一个JSONP的示例：

callbackFunction({"name":"张三","age":20})

callbackFunction是一个回调函数名，{"name":"张三","age":20}是一个JSON对象，将会作为参数传递给回调函数。

function callbackFunction(data) {
  console.log(data.name); // 输出：张三
  console.log(data.age);  // 输出：20
}

var script = document.createElement('script');
script.src = 'http://example.com/data?callback=callbackFunction';
document.head.appendChild(script);

在这里，客户端动态创建了一个script标签，通过设置其src属性为请求的URL地址，并且在URL中指定了回调函数名为callbackFunction。当该请求被发送到服务器端时，服务器会将JSONP格式的数据返回，并在其中调用回调函数callbackFunction，从而在客户端中触发该回调函数并传递数据。最终，客户端可以在回调函数中处理返回的数据。

需要注意的是，JSONP存在一些安全风险，因为它需要在服务器端动态执行传递进来的代码。因此，建议在使用JSONP时，一定要对传入的回调函数名进行严格的验证，避免出现恶意代码注入等安全问题。

服务器端返回的数据格式：

二. ### CORS（Cross-Origin Resource Sharing）：CORS是一种跨域资源共享机制，它需要在服务器端配置，允许特定的域名访问资源。可以通过设置响应头Access-Control-Allow-Origin来实现跨域请求的配置。 在服务器端设置 Access-Control-Allow-Origin 头信息

header('Access-Control-Allow-Origin: http://example.com');

在服务器端设置响应头信息，告诉浏览器哪些域名可以跨域访问该资源。例如，在 PHP 中可以使用以下代码： 这样，只有来自 example.com 的请求才能访问该资源。

2.1 在服务器端设置 Access-Control-Allow-Methods 头信息

这个头信息可以指定允许的 HTTP 请求方法。例如，在 PHP 中可以使用以下代码：

header('Access-Control-Allow-Methods: GET, POST');

2.2 在服务器端设置 Access-Control-Allow-Headers 头信息

这个头信息可以指定允许的 HTTP 请求头部。例如，在 PHP 中可以使用以下代码：

header('Access-Control-Allow-Headers: Authorization');

2.3 在服务器端设置 Access-Control-Allow-Credentials 头信息

如果需要在跨域请求中携带 cookie 或认证信息，需要在服务器端设置这个头信息。例如，在 PHP 中可以使用以下代码：

header('Access-Control-Allow-Credentials: true');

2.4 使用代理服务器

使用代理服务器转发请求，让浏览器认为请求的资源是同源的。例如，在 Node.js 中可以使用以下代码：

const http = require('http');
const httpProxy = require('http-proxy');

const proxy = httpProxy.createProxyServer({});
const server = http.createServer((req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  proxy.web(req, res, {
    target: 'http://example.com'
  });
});
server.listen(8080);

这样，请求 http://localhost:8080/xxx 就会被转发到 example.com/xxx。

三. ### 代理服务器：可以在自己的服务器上创建一个代理服务器，在该服务器上请求需要跨域的资源，再将请求结果返回给客户端，从而实现跨域请求的目的。

image.png 这里将 /api 路径下的请求代理到 http://后端服务器 地址上，并且设置 changeOrigin 为 true，表示开启跨域请求。

以上是常用的三种跨域请求的配置方式，选择合适的方式可以根据具体情况来确定。

avatar
文章
阅读
粉丝