js 跨域问题的三种解决方案

js 跨域问题的三种解决方案

在Web开发中，由于浏览器的同源策略限制，经常会遇到跨域的问题。跨域是指在浏览器的同源策略下，一个页面去请求另一个域名下的资源时会被拒绝。为了解决这个问题，我们可以采用以下三种方法来实现跨域。

1. 使用JSONP跨域

JSONP是一种跨域方式，它利用了script标签不受同源策略限制的特性。通过在页面上动态创建一个script标签，向服务器请求数据，服务器返回的数据会被当做js执行，从而实现跨域。

示例代码如下：

// 定义一个回调函数用于处理服务器返回的数据
function handleData(data) {
    console.log(data);
}

// 创建一个script标签，并设置src属性为服务器接口地址，同时传入回调函数名
var script = document.createElement('script');
script.src = 'http://example.com/api/data?callback=handleData';
document.body.appendChild(script);

在服务器端返回的数据中，需要将数据包裹在回调函数中，例如：

handleData({"name": "David", "age": 25});

2. 使用CORS跨域

CORS（Cross-Origin Resource Sharing）是一种官方标准的跨域解决方案，它允许服务器声明哪些来源可以访问资源，从而实现安全跨域。

在服务器端设置响应头：

Access-Control-Allow-Origin: *

表示允许所有来源访问资源，也可以指定具体的来源：

Access-Control-Allow-Origin: http://example.com

示例代码如下：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api/data', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

3. 使用代理服务器跨域

使用代理服务器是一种常见的跨域解决方案，可以在自己的服务器上建立一个接口，然后由该接口去请求其他域的资源，再返回给前端页面。这样前端页面只与自己的服务器通信，避免了跨域问题。

示例代码如下：

// 在自己的服务器上建立一个代理接口
app.get('/proxy', (req, res) => {
    const url = req.query.url;
    request.get(url, (err, response, body) => {
        res.send(body);
    });
});

在前端页面中请求接口：

fetch('/proxy?url=http://example.com/api/data')
    .then(response => response.json())
    .then(data => console.log(data));

以上就是三种常见的解决跨域问题的方法，根据项目的需求和实际情况选择适合自己的解决方案。