浅析jsopn跨域请求原理及cors（跨域资源共享）的完美解决方法

下面我来详细讲解“浅析jsopn跨域请求原理及cors（跨域资源共享）的完美解决方法”的完整攻略。

背景知识

在介绍 JSOPN 跨域请求原理及 CORS（跨域资源共享）解决方法前，我们需要先了解一些相关的背景知识。

什么是跨域？

跨域指的是浏览器不能执行其他网站的脚本。这里的“其他网站”是指，和当前网页有不同协议、域名或端口的网站。

什么是跨域请求？

跨域请求是指：当前发起请求的网页和请求的目标资源所在的网页，处于不同的域。

什么是 CORS 跨域资源共享？

CORS（Cross-Origin Resource Sharing）跨域资源共享，它允许浏览器向跨源服务器，发起 XMLHttpRequest 请求，从而克服了 AJAX 只能同源使用的限制。

JSOPN 跨域请求原理

当浏览器发起跨域请求的时候，会先向服务器发起一个 OPTIONS 请求，获取一些必要的信息（如允许跨域请求的方法等），之后才会正式发起 POST、GET 请求等请求方式。

JSOPN 通过添加一个 script 标签来向不同域名下的服务器发起请求，由于 script 标签的 src 属性不受同源策略限制，所以可以跨域。当然，在使用 JSOPN 跨域请求的时候，我们还需要在服务器端做一些额外的设置，这也是接下来要讲的主要内容。

CORS（跨域资源共享）的完美解决方法

在服务器端添加如下设置即可：

// 允许跨域的域名
const allowOrigin = [
  'http://www.example1.com',
  'http://www.example2.com'
];

app.use((req, res, next) => {
  // 设置允许跨域的域名
  const origin = req.headers.origin;
  if (allowOrigin.includes(origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    if (req.method === 'OPTIONS') {
      res.setHeader('Access-Control-Allow-Methods', 'PUT, POST, DELETE, GET');
      res.setHeader('Access-Control-Max-Age', '3600');
      res.setHeader('Access-Control-Allow-Credentials', 'true');
      res.writeHead(200);
      res.end();
    }
  }
  next();
});

上面的代码中，我们首先设置了允许跨域的域名，当请求的来源在其中的一个允许域名内时，我们会设置一系列的消息头，从而允许此次跨域请求。

示例一：

假设当前网站运行在 http://www.example1.com，现需要从 http://www.example2.com 获取数据，那么我们需要首先在 http://www.example2.com 的服务器端设置上述的跨域配置，之后在 http://www.example1.com 中执行如下代码即可获取到跨域的数据：

const url= 'http://www.example2.com/api/data';
const script = document.createElement('script');
script.src = url;
document.body.appendChild(script);

window.handleData = function (data) {
  console.log('跨域数据：', data);
}

示例二：

配合 AJAX 使用：

const xhr = new XMLHttpRequest();

// 配置参数
const url = 'http://www.example2.com/api/data';
const data = { name: '张三' };
xhr.open('POST', url);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.withCredentials = true;
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
      const response = JSON.parse(xhr.responseText);
      console.log('跨域 AJAX 数据：', response);
    }
  }
};
xhr.send(JSON.stringify(data));

这样，就可以使用 AJAX 跨域请求了。

总结：

通过上述的介绍，我们可以发现 CORS 的使用相对来说比较简单，只需要在服务器端设置一些允许跨域请求的配置即可。在实际开发中，可以根据情况修改 allowOrigin 中的域名，实现精细化的跨域控制，提升应用的安全性与可控性。