前端 javascript 代码怎么解决移动端的跨域问题

前端JavaScript代码可以通过几种方法解决移动端的跨域问题，包括使用CORS（跨源资源共享）、JSONP（JSON with Padding）、代理服务器、HTML5 postMessage API等技术。当中，CORS机制通过服务器设置HTTP响应头，允许来自不同源的资源进行交互，是目前主流且推荐的解决方式，安全性相对更高。

我们将详细介绍CORS机制如何解决跨域问题。在CORS配置中，服务端将在响应头中加入Access-Control-Allow-Origin字段，从而指明哪些源可以访问资源。如服务器想允许的域名是https://example.com，则Access-Control-Allow-Origin的值可以设置为https://example.com。如果允许所有域访问，则设置为*。前端代码不需做太多更改，浏览器在接到带有CORS响应头的响应后，会自动处理跨域问题。

一、CORS详解与实现

CORS，即跨源资源共享，是现代浏览器支持的一种特性，用以解决AJAX请求中的跨源问题。由于同源策略，JavaScript发起的AJAX请求默认只能访问与页面同源的服务器资源。CORS允许浏览器与服务器进行协商，以确定是否允许跨源请求。

简单请求与预检请求

CORS请求分为两类：简单请求和预检请求。简单请求通常指GET、POST或HEAD方法的HTTP请求，同时遵循一定的限制，如HTTP头部限制。简单请求会直接发给服务器，服务器根据设置的CORS响应头部确定是否响应请求。

预检请求是对非简单请求的一种预先验证，使用OPTIONS方法发送至服务器，询问服务器是否允许某种类型的跨域请求。这是因为非简单请求可能会导致对服务器数据的修改。预检请求成功后，实际请求才会被发送。

配置CORS

配置CORS需要在服务器的响应头中添加一些字段。最重要的字段包括：

Access-Control-Allow-Origin: 声明哪些源可以访问资源
Access-Control-Allow-Methods: 声明允许的访问方法
Access-Control-Allow-Headers: 允许的自定义请求头
Access-Control-Allow-Credentials: 是否允许发送Cookie

跨域资源共享的示例

例如，一个从https://example-mobile.com发出的AJAX请求想要访问https://api.example.com/data的资源，如果api.example.com的响应中包含以下CORS头部信息，则请求成功：

Access-Control-Allow-Origin: https://example-mobile.com Access-Control-Allow-Methods: GET, POST, OPTIONS Access-Control-Allow-Headers: Content-Type

二、使用JSONP

JSONP（JSON with Padding）是一种通过动态创建<script>标签的方式来解决跨域请求的问题。尽管它有一定的限制，比如只能发送GET请求，但在CORS不被支持的旧浏览器中仍然非常有用。

JSONP原理

JSONP工作原理基于<script>元素不受同源策略限制的特性。通过向URL附加一个回调函数名，服务器动态生成带有此函数调用的JavaScript代码作为响应，一旦加载完毕，就会执行这个函数。

JSONP实践

前端需要提供一个全局函数作为回调，然后动态创建一个<script>标签，其src属性设置为包含要请求的服务器端URL，同时附加回调函数名的参数。服务器则根据参数包装数据，并返回执行回调函数的脚本。

三、设置代理服务器

代理服务器可以作为前端应用与目标服务器之间的中介，用来转发请求与响应。这个中介将源自不同域的调用伪装成对同一域的调用，从而绕开同源策略的限制。

代理服务器工作方式

代理服务器接收来自前端应用的请求，然后代表该应用向目标服务器发送请求。代理服务器获取响应后，再将其返回给前端应用。这种方法对前端透明，无需修改现有的前端代码。

实现代理服务器

实现代理服务器可以使用各种服务器端语言和框架，例如Node.js的Express框架，配合http-proxy-middleware。以下是一个基本的代理服务器配置示例：

const { createProxyMiddleware } = require('http-proxy-middleware');
app.use('/api', createProxyMiddleware({ 
    target: 'https://api.example.com', 
    changeOrigin: true 
}));

四、使用HTML5 PostMessage API

HTML5的postMessage API允许来自不同源的脚本进行受限通信。这种方法用于iframe间通信、或在主页面与新打开的子窗口（通过window.open）之间通信。

postMessage基础

postMessage方法允许窗口之间发送消息，接收方通过监听message事件来接收消息。消息发送方在调用postMessage时可以指定接收消息的窗口的源，安全地只发送给指定的接收方。

交互实例

页面A（如https://example-mobile.com/page-a.html）可以对其内嵌的iframe B（如https://api.example.com/iframe-b.html）使用postMessage发送消息：

// 在页面A中
let iframeWindow = document.getElementById("iframeB").contentWindow;
iframeWindow.postMessage('Hello!', 'https://api.example.com');

监听iframe B中的消息并做出响应：

// 在iframe B中
window.addEventListener('message', function(event) {
    if (event.origin !== 'https://example-mobile.com') {
        // 校验来源源是否可信
        return;
    }
    console.log('Received message:', event.data);
    // 处理接收到的数据
});

总的来说，解决移动端JavaScript跨域问题通常需要服务端的支持，但也有纯前端的解决方案，如JSONP和postMessage。开发者应根据具体应用场景和安全需求，选择最适合的方法。