在前端开发中，跨域请求是一个经常被提及的话题。了解跨域请求的概念及解决方法，是每位前端工程师必备的技能之一。本文将会深入探讨跨域请求的定义、原因以及如何解决跨域请求的问题。
什么是跨域请求？
跨域请求指的是在浏览器端，当前页面的域与请求目标资源的域不一致，导致浏览器的同源策略限制而无法正常完成请求操作。同源策略是浏览器的一种安全策略，用于限制一个源（协议 + 域名 + 端口）的文档或脚本如何能与另一个源的资源进行交互。
以下几种情况会触发跨域请求：
- 域名不同：http://www.example.com 与 http://api.example.com
- 端口不同：http://www.example.com:3000 与 http://www.example.com:4000
- 协议不同：http://www.example.com 与 https://www.example.com
如何解决跨域请求的问题？
JSONP（JSON with Padding）
JSONP 是一种跨域请求的解决方案，通过动态创建 <script> 标签，实现跨域请求并获取数据。具体实现如下：
function jsonp(url, callback) {
const script = document.createElement('script');
script.src = url + '?callback=' + callback;
document.body.appendChild(script);
}
// 调用
jsonp('http://api.example.com/data', 'handleData');
function handleData(data) {
console.log(data);
}
CORS（Cross-Origin Resource Sharing）
CORS 是一种官方标准的跨域解决方案，通过服务器设置响应头来实现跨域请求的授权。需要在服务器端配置响应头，允许指定的源访问资源。示例如下：
// Node.js Express 服务器设置 CORS
app.use(function(req, res, next) {
res.setHeader('Access-Control-Allow-Origin', 'http://www.example.com');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
res.setHeader('Access-Control-Allow-Credentials', true);
next();
});
使用代理服务器
在开发环境中可以通过启动一个代理服务器来解决跨域请求的问题。代理服务器会将请求转发到目标服务器并返回结果给浏览器，隐藏了实际的跨域请求。示例代码如下：
// webpack-dev-server 代理配置
devServer: {
proxy: {
'/api': {
target: 'http://api.example.com',
changeOrigin: true,
pathRewrite: { '^/api': '' },
},
},
}
结语
通过本文的介绍，我们了解了跨域请求的概念以及常见的解决方案。在实际开发中，根据具体的场景选择合适的跨域解决方案非常重要。
更多面试题请点击：web前端高频面试题_在线视频教程-CSDN程序员研修院
最后问候亲爱的朋友们，并邀请你们阅读我的全新著作
