标签：http 跨域 前端 配置 代理 webpack proxy
前端配置跨域代理两种方式：
—、使用webpack/dev配置跨域代理
二、 使用中间件http-proxy-middleware配置跨域代理
三、 对比
跨域对于前后端开发来说是一个老生常谈的问题了。客户端与服务端通信时协议不同、域名不同、端口不同都会产生跨域问题。
值得一说的是跨域是源于浏览器的同源策略，也就是浏览器做了访问限制。而XMLHttpRequest请求和Fetch API都遵循同源策略。所以跨域也只发生在XHR 请求和Fetch请求。像script标签的src请求是不会产生跨域的，这也就是为什么jsonp可以解决跨域。但是jsonp只能解决get请求的跨域问题。
大多数情况下，只需后端cors （Cross-origin resource sharing z中文译为跨域资源共享）即可解决跨域问题。也就是要依赖于后端才能解决跨域问题。那 么前端想要本地调式，如何不依赖于后端解决跨域问题昵？
cors是一种机制，该机制是使用HTTP头来告诉浏览器，允许运行在一个源上的web应用访问不同源上的资源。除了 cors的方案外，还可以通过配置代理来 解决跨域问题，即把服务器的域名代理成本地进行请求，那么请求的就是本地接口，就不会产生跨域问题。
前端配置跨域代理有两种方式。
—■使用webpack/dev配置跨域代理
在使用和配置webpack时一般都会安装webpack-dev-servero 在webpack.config.js中配置如下：
参数说明：
7httpServer,
捕获API的标志，如果API中包含VhttpServer5字符串，就会开始匹配代理。
比如 VhttpServer/user/login^ 就会被代理至!] 'http:〃10.0.0.0: 8080/httpServer/user/loginJ
target
代理的跨域地址，就是需要被代理的跨域地址。
可以是域名，也跨域是IP。如果是域名，则需要加上changeorigin: true,否则代理会失效。
path Rewrite
重写路径，修改原始请求路径。也就是把服务器地址代理同源地址。
secure
不检查安全问题，设置后，可以运行在HTTP上，可以使用无效正式的HTTPS服务。
二.使用中间件http-proxy-middleware配置跨域代理
1.安装 http-proxy-middleware
1 npm install http-proxy-middleware --save-dev
2.在src目录下新建setupProxy.js文件，内容如下。
实现原理是使用 http-proxy-middleware 的 createProxyMiddleware 方法。
其中：target是服务器地址。changeOrigin是将主机的源更改为目标URL,默认为false。path Rewrite是代理的目标地址。即如果代理到本地，就写本地地 址。
以上代理配置将会匹配所有以/httpServer开始的路径。并将服务器'http:〃1O.O.O.O: 8080'上面的7httpServer,请求代理到本地'http://localhost:3000'。
三、对比
其实可以看到方法一和方法二的配置基本相同。因为方式一也是通过http-proxy-middleware中间件来实现的，只不过可以直接在webpack中进行配置。那在使 用上二者有什么区别昵？
如果webpack.config.js文件暴露在外，可以使用第一种方法。如果使用create-react-app创建的脚手架react项目，webpack配置文件没有对外暴露，就可 以使用第二种方法。
标签：http,跨域,前端,配置,代理,webpack,proxy 来源： https://www.cnblogs.com/shaowangwu/p/16325454.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。