说说webpack proxy工作原理?为什么能解决跨域

webpack-dev-server 提供了一个 proxy 功能，可以资助开辟者在本地开辟时解决跨域问题。要明白其工作原理以及为什么可以解决跨域问题，起首我们须要了解两个关键概念：跨域问题 和 代理的工作方式。
1. 跨域问题的本质

跨域问题是欣赏器的同源计谋（Same-Origin Policy）引起的。欣赏器会限制从一个源（协议、域名、端口）发起的请求访问另一个源的资源。具体来说，以下任意一项不同都被认为是跨域：

• 协议（如 http:// 和 https://）
  
• 域名（如 example.com 和 api.example.com）
  
• 端口（如 http://localhost:3000 和 http://localhost:8000）
  

在前端开辟中，通常会碰到这种情况：前端应用运行在 http://localhost:8080，而后端 API 服务器运行在 http://localhost:3000。由于端口不同，它们被认为是不同的源，直接请求后端 API 会触发跨域问题。
2. webpack proxy 的工作原理

webpack-dev-server 提供的 proxy 功能通过代理服务器的情势绕过了欣赏器的同源计谋。其工作原理可以简朴形貌为：

• 请求拦截：当欣赏器向开辟服务器（如 http://localhost:8080）发送请求时，webpack-dev-server 会检查该请求的路径是否符合代理规则。
  
• 请求转发：如果符合代理规则，webpack-dev-server 会将该请求转发（代理）到目标服务器（如 http://localhost:3000）。从欣赏器的角度来看，它的全部请求都还是发往 http://localhost:8080，所以不会触发跨域问题。
  
• 响应回传：目标服务器（如后端 API）接收到请求后，处理并返反响应。webpack-dev-server 代理服务器收到响应后，将其再转发给欣赏器。整个过程对欣赏器是透明的，欣赏器并不知道请求实际上是由代理服务器转发的。
  

通过这种方式，欣赏器只与 webpack-dev-server 通信，而不是直接与后端服务器通信，因此制止了跨域限制。
3. 为什么能解决跨域问题

通过代理的方式，webpack-dev-server 使欣赏器始终认为它是在与同源的服务器（即 localhost:8080）进行通信，而实际的请求是在服务器端完成的跨域。由于跨域请求发生在服务器端，而不是欣赏器端，服务器之间的通信没有同源计谋的限制，所以可以正常请求不同源的资源。
4. 设置示例

一个典型的 proxy 设置如下：

1. module.exports = {
2.   devServer: {
3.     proxy: {
4.       '/api': {
5.         target: 'http://localhost:3000',
6.         changeOrigin: true,
7.         pathRewrite: { '^/api': '' },
8.       },
9.     },
10.   },
11. };

复制代码

• /api：匹配全部以 /api 开头的请求路径。
  
• target：指向目标服务器地点（如 http://localhost:3000）。
  
• changeOrigin：设置为 true 后，代理服务器会修改请求头中的 Host 字段，使其与目标服务器一致。
  
• pathRewrite：重写路径规则，这里将 /api 去掉，使得请求路径与目标服务器匹配。
  

5. 总结

webpack-dev-server 的 proxy 通过在开辟服务器上代理请求，将前端发向开辟服务器的请求转发给后端实际的 API 服务器，从而制止了欣赏器的同源计谋限制，解决了跨域问题。代理的本质是欣赏器只与同源的服务器通信，而跨域请求则由服务器进行，绕过了欣赏器的跨域安全限制。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。