跨域问题.

跨域问题.

    跨域问题（Cross-Origin Resource Sharing, CORS）是由于浏览器的安全策略导致的。当浏览器中的脚本（JS）试图从一个源（域名、协议、端口）获取资源（如图片、文本、脚本等）时，如果该资源的源与脚本所在页面的源不同，那么浏览器会拒绝该请求。这种情况下，就会出现跨域问题。

为了解决跨域问题，需要在服务端配置允许跨域访问的头信息。常用的解决方案包括：

1. JSONP（JSON with Padding）：通过添加一个<script>标签来获取跨域数据。

2. CORS：在服务端配置允许跨域访问的头信息，如Access-Control-Allow-Origin、Access-Control-Allow-Methods等。

3. 代理：将跨域请求发送给服务端，由服务端代为请求，并将结果返回给客户端。

当客户端的 JS 代码需要从不同的域名请求资源时，常常会遇到跨域问题。以下是几种解决跨域问题的常用方法：

1. JSONP

JSONP（JSON with Padding）是一种跨域解决方法，其原理是通过动态创建 <script> 标签并指定 src 属性值，向服务器请求数据。服务器返回一段可执行的 JS 代码，客户端的 JS 代码通过回调函数获取数据并进行处理。

假设有这样一个请求：

<script src="=processData">

对应的服务端返回如下数据：

processData({'name' : 'John', 'age' : 30});

客户端的 JS 代码可以这样处理：

function processData(data) {console.log('Name: ' + data.name);console.log('Age: ' + data.age);
}

2. CORS

CORS（Cross-Origin Resource Sharing）是跨域资源共享的简称，是一种通过在服务器端设置 HTTP 头部的方式来允许浏览器向跨源服务器发起 XMLHttpRequest 请求的机制。

在服务端设置允许跨域访问的头信息，如以下 PHP 代码：

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Authorization');

以上代码允许所有域名访问该资源，并允许的 HTTP 请求方法为 GET、PUT、POST、DELETE 和 OPTIONS。同时，也允许客户端发送 Authorization 和 Content-Type 头部信息，以便认证和传输数据。

3. 代理

在使用代理解决跨域问题时，客户端的 JS 代码将请求发送给同域的服务端，服务端再将请求发送给目标服务器，获取数据后再返回给客户端。

例如，客户端的 JS 代码请求以下地址：

此时会发起同域请求到服务端：

http://localhost:8080/proxy?url=

服务端的代码可以这样实现：

var http = require('http');
var request = require('request');http.createServer(function(req, res) {if (req.url.indexOf('/proxy') === 0) {var url = req.url.replace('/proxy?url=', '');request.get(url, function(err, response, body) {if (err) {console.log(err);} else {res.writeHead(200, {'Content-Type' : 'application/json'});res.write(body);}res.end();});}
}).listen(8080);

以上代码可以将请求发送到目标服务器，并将获取的数据返回给客户端。