js跨域访问示例(客户端/服务端)

让我来给您讲解关于“js跨域访问”的攻略。

什么是跨域访问

跨域访问是指在一个域名下的网页，通过引用其他域名下的资源（如图片、脚本、样式等）时，并不能和资源所在的域名进行正常的交互，这种情况叫做跨域。

解决跨域的方法

在前后端分离的开发环境中，跨域的问题经常会出现。在实际项目中，我们可以采用以下方式来解决跨域问题：

JSONP

JSONP 是一种通过嵌入式 Script 标签来使用的跨域技术，其原理是通过 script 标签引用一个后台接口，接口返回的是一个函数调用，函数的实参是接口返回的数据，在前端里面定义这样一个接收函数用于接收数据，函数里面就是对数据的处理。JSONP 可以跨域获取数据，但只支持 GET 请求。下面是一个 JSONP 示例：

function jsonpCallback(data) {
    console.log(data);
}

let script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.example.com/api?callback=jsonpCallback';
document.head.appendChild(script);

CORS

CORS （Cross Origin Resource Sharing）是一种新的跨域机制，它允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全有效。使用 CORS 有以下几个步骤：

1. 在服务端设置 Access-Control-Allow-Origin 头，该头部表示允许的跨域域名。

2. 在服务端设置 Access-Control-Allow-Credentials 头，并将值设置为 true，表示允许发送 cookie 等认证信息。

3. 在服务端设置 Access-Control-Allow-Methods 头，该头部表示允许的请求方法（GET、POST 等）。

下面是一个 CORS 示例：

fetch('http://www.example.com/api/', { 
  method: 'GET',
  credentials: 'include',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.log(err));

服务端处理

服务端进行反向代理或者直接请求的方法也可以解决跨域问题。通常是在同一个域名下，使用 Nginx 等服务器软件，将前端的请求转发到后端服务器，再将后端返回的结果返回给前端，这样就可以在同一个域名下，无需跨域。

下面是一个 Nginx 反向代理示例：

server {
    listen       80;
    server_name  www.example.com;

    location /api/ {
        proxy_pass   http://127.0.0.1:8080/;
        proxy_set_header Host $host;
    }
}

示范

下面是一个客户端通过 JSONP 跨域访问的示例：

function jsonpCallback(data) {
    console.log(data);
}

let script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.example.com/api?callback=jsonpCallback';
document.head.appendChild(script);

下面是一个服务端通过 Nginx 反向代理的示例：

server {
    listen       80;
    server_name  www.example.com;

    # 静态资源
    location / {
        root   /var/www/html;
        index  index.html index.htm;
    }

    # API 服务
    location /api/ {
        proxy_pass   http://127.0.0.1:8080/;
        proxy_set_header Host $host;
    }
}

以上是关于“js跨域访问”的完整攻略，希望对您有所帮助。