博客

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

  • Post category:http

我们来详细讲解一下JS跨域的前后端解决方案。

1.什么是跨域

在讲解跨域的解决方案之前，我们首先了解一下什么是跨域。

跨域指的是一个请求从一个域名（网站）的域，去请求另一个域名（网站）的资源，这时就会产生跨域的问题。

比如，在 A 域名下的网页通过 ajax 技术向 B 域名下的网页请求数据，这种情况下就会产生跨域问题。

2.为什么跨域会产生安全问题

浏览器有同源策略，是浏览器最核心也最基本的安全功能。同源策略规定，如果两个URL的协议、域名、端口有一个不同就被认为是跨域，跨域的请求只有在目标服务器同意的情况下才能发起。否则，浏览器将禁止该请求，因为它可能会向两个服务器违反用户意愿地传送数据。

3.跨域解决方案

3.1 JSONP

JSONP（JSON with Padding）是一种跨域方式，它通过动态添加<script>标签可以实现跨域访问，使用的前提是服务商支持 JSONP 的跨域请求，实现步骤如下：

  • 前端代码：
function handleResponse(responseData) {
  console.log(responseData);
}

let scriptElement = document.createElement('script');
scriptElement.src = 'http://example.com/api?callback=handleResponse';
document.body.appendChild(scriptElement);
  • 后端代码：
const querystring = require('querystring');

const requestData = {
  data: 'hello world',
  time: new Date().getTime()
};

const queryData = querystring.stringify(requestData);

const callbackName = querystring.parse(request.url.split('?')[1]).callback;
const responseData = `${callbackName}(${JSON.stringify(requestData)})`;

response.writeHead(200, {'Content-Type': 'application/javascript'});
response.end(responseData);

3.2 CORS

CORS（Cross-Origin Resource Sharing）跨域资源共享是一种跨域方式，它需要后端支持，但安全性更高且非常灵活。

  • 前端代码：
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api', true);
xhr.withCredentials = true;

xhr.onload = function () {
  console.log(xhr.responseText);
};

xhr.send();
  • 后端代码：
response.writeHead(200, {
  'Access-Control-Allow-Origin': 'http://example.com',
  'Access-Control-Allow-Credentials': true
});

const responseData = {
  result: 'hello world'
};

response.end(JSON.stringify(responseData));

4.结语

通过学习以上两种跨域解决方案，我们可以更好地理解跨域的原理和解决方法，实际开发中应根据实际情况选择合适的解决方案。

Tags: