什么是跨域请求，如何解决跨域请求的问题？

在前端开发中，跨域请求是一个经常被提及的话题。了解跨域请求的概念及解决方法，是每位前端工程师必备的技能之一。本文将会深入探讨跨域请求的定义、原因以及如何解决跨域请求的问题。

什么是跨域请求？

跨域请求指的是在浏览器端，当前页面的域与请求目标资源的域不一致，导致浏览器的同源策略限制而无法正常完成请求操作。同源策略是浏览器的一种安全策略，用于限制一个源（协议 + 域名 + 端口）的文档或脚本如何能与另一个源的资源进行交互。

以下几种情况会触发跨域请求：

1. 域名不同：http://www.example.com 与 http://api.example.com
2. 端口不同：http://www.example.com:3000 与 http://www.example.com:4000
3. 协议不同：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程序员研修院

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作