JS跨域(Access-Control-Allow-Origin)前后端解决方案详解

什么是跨域

在Web开发过程中，由于浏览器限制，当协议、主机、域名或端口号任意一个不同时，都会产生跨域问题。

前端解决方案

JSONP

JSONP（JSON with Padding）是一种跨域数据访问方案，它通过动态创建<script>标签，然后请求一个带参数的url来实现与服务器进行通信，服务器则把数据放在一个函数的参数中，返回给客户端。

示例代码：

function jsonp(url, callback) {
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url + '?callback=' + callback;
  document.getElementsByTagName('head')[0].appendChild(script);
}

jsonp('http://www.example.com/api', function (data) {
  console.log(data);
});

CORS

CORS（Cross-Origin Resource Sharing）是一种跨域访问机制，可以让服务器支持跨域访问，通过在HTTP响应头添加Access-Control-Allow-Origin字段来实现。

示例代码：

const xhr = new XMLHttpRequest();
xhr.open('get', 'http://www.example.com/api', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
xhr.send(null);

后端解决方案

代理

通过后端代理转接接口，绕过浏览器的限制，让前端直接访问代理服务器即可。

示例代码：

const express = require('express');
const request = require('request');
const app = express();
app.get('/api', function (req, res) {
  const url = 'http://www.example.com/api' + req.url;
  req.pipe(request(url)).pipe(res);
});
app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

Nginx反向代理

在 Nginx 反向代理服务器上设置跨域信息即可让浏览器跨域请求。

示例配置代码：

location /api {
  proxy_pass http://www.example.com;
  add_header 'Access-Control-Allow-Origin' '*';
}

以上是JS跨域（Access-Control-Allow-Origin）前后端解决方案的详细攻略，希望对大家有所帮助。