webpack之proxyTable设置跨域

本文探讨了在项目开发中常见的跨域问题,特别是在使用vue-cli等脚手架工具时,通过配置proxyTable来实现跨域请求的解决方案。文章详细介绍了如何在vue-cli项目中配置proxyTable,并提供了一个巧妙的方法来处理没有统一项目名的接口跨域问题。

为什么要使用proxyTable

  • 很简单,两个字,跨域。
  • 在平时项目的开发环境中,经常会遇到跨域的问题,尤其是使用vue-cli这种脚手架工具开发时,由于项目本身启动本地服务是需要占用一个端口的,所以必然会产生跨域的问题。当然跨域有多种解决方式,这里就不一一例举,下次弄篇文章单独讲,在使用webpack做构建工具的项目中使用proxyTable代理实现跨域是一种比较方便的选择。
  • 如何使用proxyTable
  • 还是拿之前使用过的vue-cli举例。我们首先要在项目目录中找到根目录下config文件夹下的index.js文件。由于我们是在开发环境下使用,自然而然是要配置在dev里面:
  •  
  • 上面这段代码的效果就是将本地8080端口的一个请求代理到了http://www.abc.com这一域名下:
  • 'http://localhost:8080/api' ===> 'http://www.abc.com/api'
  • 没有统一项目名下的使用

  • 上面那种情况是有一个统一的项目名api的,所以说是比较好匹配的,就相当于说直接将以api开头的接口名代理一下换成目标域名访问就好了,可是如果说后台返给我们前端的接口没有了统一的项目名呢?之前,我是一个个单独去做了转换,接口少还没什么关系,但多了肯定是不现实的,前段时间在一次面试中受到了面试官的启发想到了这样一种取巧的方案:

在Vue项目中,Webpack提供了proxyTable配置项,用于解决开发环境下的请求问题。通过配置proxyTable,可以将前端的请求代理到指定的后端服务器,从而绕过浏览器的同源策略限制。以下是具体的配置步骤和代码示例: 参考资源链接:[Vue开发中配置与Nginx部署详解](https://wenku.youkuaiyun.com/doc/645c986995996c03ac3ce2f8?spm=1055.2569.3001.10343) 1. 打开项目的config文件夹下的index.js文件。 2. 在dev环境的配置中找到proxyTable部分。 3. 设置代理规则,例如,将所有以'/api'开头的请求代理到后端服务。示例配置如下: ```javascript proxyTable: { '/api': { target: '***', // 指定后端服务地址 changeOrigin: true, // 处理,设置为true允许代理服务器修改请求头中的HOST字段 pathRewrite: { '^/api': '' // 重写请求路径,去除URL中的'/api' } } } ``` 这样配置后,前端发送的请求如`***`会被代理到`***`。 当项目从开发环境迁移到生产环境,并部署到服务器上时,需要对Nginx进行配置,以处理问题。Nginx可以通过设置适当的HTTP头信息来支持CORS,允许资源共享。以下是Nginx配置的示例: 1. 在Nginx配置文件中(通常位于`/etc/nginx/nginx.conf`或者`/etc/nginx/sites-available/`目录下),找到或创建一个server块。 2. 在该server块中,添加一个location块来指定需要支持的路径,并添加CORS相关的header配置: ```nginx location /api { proxy_pass *** 后端服务地址 proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; # 添加CORS相关的header add_header 'Access-Control-Allow-Origin' '*'; # 可以指定名替代'*'以提高安全性 add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; } ``` 以上配置中,`Access-Control-Allow-Origin`字段设置了允许的源,`Access-Control-Allow-Methods`设置了允许的HTTP方法,`Access-Control-Allow-Headers`则定义了允许的HTTP请求头。 通过上述的Webpack和Nginx配置,即可在Vue项目中实现请求的处理,确保在开发和生产环境下的请求都能够正常进行。同时,建议仔细阅读官方文档和相关资料,以更深入理解配置的原理和细节。 参考资源链接:[Vue开发中配置与Nginx部署详解](https://wenku.youkuaiyun.com/doc/645c986995996c03ac3ce2f8?spm=1055.2569.3001.10343)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值