在前端开发中，我们经常会使用到单页应用程序，然而单页应用程序中跨域请求问题也同样频繁出现。本文将介绍跨域请求的概念，以及如何解决单页应用程序中跨域请求问题。
背景知识
跨域请求指的是客户端（浏览器）通过 ajax 等方式发起的请求，目标地址与当前页面的域名不同，导致请求被浏览器拦截。众所周知，浏览器的同源策略限制了这种行为。
同源策略：指的是协议、域名和端口号三者均相同，才能够互相访问。例如，一个页面的地址为 http://a.example.com:8080/index.html，则同源的地址有：
非同源的地址有：
解决方案
在单页应用程序中，我们可以使用以下三种方法来解决跨域请求问题。
使用代理服务
代理服务指的是在同源服务器上开启一个代理服务，将跨域请求的地址发送给代理服务，再由代理服务向目标地址发起请求。这种方法需要通过服务器端进行配置，主要有以下两种方式。
Nginx 反向代理
在 Nginx 中添加反向代理配置：
location /api {
proxy_pass http://example.com;
}上述配置将所有以 /api 开头的请求，发送给 http://example.com 处理。
webpack-dev-server
在 webpack-dev-server 中添加代理配置：
-- -------------------- ---- -------
---------- -
------ -
------- -
------- --------------------- -- ----
------------- -----
------------ -
-------- ---
-
-
-
--上述配置将所有以 /api 开头的请求，地址替换为 http://example.com 处理。
使用 jsonp
jsonp 可以通过动态创建 script 标签，以回调函数的形式处理跨域请求。需要服务器端配合返回一个 JSONP 的响应（格式为 callback(jsonData)）。通过回调函数将数据传递到客户端。
let script = document.createElement('script');
script.src = 'http://example.com/api/user?callback=handleResponse';
document.body.appendChild(script);
function handleResponse(res) {
console.log(res);
}使用 CORS
CORS（Cross-Origin Resource Sharing，跨域资源共享）是一种机制，允许跨域请求访问服务器端的资源。服务器端需要添加一个 Access-Control-Allow-Origin 头信息，来指定允许跨域请求的地址。
在服务器端添加头信息：
Access-Control-Allow-Origin: *
- 表示允许任意地址进行跨域请求。
客户端代码：
fetch('http://example.com/api/user', {
method: 'GET',
mode: 'cors'
}).then(res => {
console.log(res);
});需要注意的是，CORS 机制需要服务器端开启。
示例代码
使用代理服务
在前端代码中，直接访问代理服务即可。
fetch('/api/user', {
method: 'GET'
}).then(res => {
console.log(res);
});使用 jsonp
let script = document.createElement('script');
script.src = 'http://example.com/api/user?callback=handleResponse';
document.body.appendChild(script);
function handleResponse(res) {
console.log(res);
}使用 CORS
fetch('http://example.com/api/user', {
method: 'GET',
mode: 'cors'
}).then(res => {
console.log(res);
});总结
使用代理服务、jsonp 或者 CORS，都可以解决单页应用程序中的跨域请求问题。开发者可以根据具体需求和服务器配置，选择合适的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64619267968c7c53b02ee2dd