webpack 本地开发时的跨域及react中跨域

最新推荐文章于 2024-08-08 09:02:17 发布

clearNew

最新推荐文章于 2024-08-08 09:02:17 发布

阅读量700

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/s_heep/article/details/107050762

版权

浏览器的同源策略限制了接口交互，导致跨域问题。本文探讨了js中CORS、nginx、服务器代理和JSONP等跨域方法，并详细介绍了在webpack中如何配置跨域，包括在devServer.proxy中处理同域端口不同情况，以及在create-react-app项目中通过setupProxy.js解决跨域问题。

摘要由CSDN通过智能技术生成

跨域

由于浏览器的安全机制，规定了同源策略，即只允许同源下的接口交互。同源即协议、域名、端口号相同。那么要想访问其他域下的接口就涉及到了跨域。
js中跨域有一下几种方法

CORS 跨域
nginx
服务器代理
jsonp

那么在webpack中是如何配置跨域的呢？

一、同域但端口号不同下使用 devServer.proxy

// webpack.config.js
devServer: {
   
	proxy:{
   
		'/api':{
    // 重写路径可以整理 指定的访问路径
			target: 'http://localhost：8888',
			pathRewrite:{
   '/api': ''} ,
			// changeOrigin: true, // 服务端不同域时，设置为true 即target值为http://www.baidu.com时也可访问成功
		}
	}
},
// 我们也可以在访问一些路径时加一下mock数据
devServer: {
   
	before(app