webpack代理实现vue或者react项目的跨域问题

以你之姓@ 2022-04-10 05:57 267阅读 0赞

> webpack是一款很好用的打包工具，同时它还可以创建一个本地服务器，是你的前端代码可以在服务器的环境下运行。

### proxy ###

###### （1）代理路由 ######

proxy是webpack中devServer的一个配置，主要是用来代理某些URL的。

proxy: {
      "/api": "http://localhost:3000"
    }

像这样，运行webpack就可以实现代理的效果了，这时候你请求接口/api/users时，webpack服务器自动就会把请求的路由换成http://localhost:3000/api/users。

###### （2）路由重写 ######

假如说你不想使用/api，那么我们可以重写一下路由：

proxy:{
    	"/api":{
    		target:"http://localhost:3000",
    		pathRewrite:{
    			"^/api":""
    		}
    	}
    }

这样我们那就不需要加上api了，可以直接请求/users，webpack会自动将请求代理到http://localhost:3000/users上。

###### （3）使用https协议 ######

当然，现在很多的网站使用的都是https协议了，而webpack服务器默认是不接受运行在https上，且使用了无效证书的后端服务器。不过我们又很想用怎么办？不用担心。proxy有一个可以允许使用https的属性

secure:true

这个属性默认是false，假如我们想要使用https的话，就需要在配置项里面，将这个属性改成true就好了。

###### （4）改变origin进行跨域 ######

在写前端的时候，经常会碰到跨域问题，这时候我们就可以使用proxy中的changeOrigin属性，改变请求的根路由，这样就可以进行跨域请求了。

> 当然，proxy的配置不止这些，如果感兴趣的同学可以去[官网][Link 1]学习一下

### vue中的代理跨域 ###

如果我们是使用vue开发我们的项目，我们只需要在项目中的config/index.js中找到proxyTable属性，这个属性就是webpack中的proxy属性。改过之后就可以跨域请求了。

### react中跨域请求 ###

使用create-react-app创建项目的同学打开项目的时候可能找不到webpack的配置文件，这不是因为react没有引入webpack，而是通过其他的方式将webpack引入进来了。  
接下来我教大家怎样找webpack配置文件。

> 1、打开package.json文件，找到项目的启动指令react-scripts；  
> 2、在node\_modules中找到react-scripts文件夹，然后打开config文件夹，就可以看到他的webpack配置文件了。

虽然我们找到他的配置文件了，不过你会发现一件很诡异的事情，竟然找不到他的proxy配置项在哪里。难道他没有这一项？  
当然不是，打开webpackDevServer.config.js文件，搜索一下proxy，你会看到在他的module.exports暴露的函数中有一个，他就是我们需要的配置项。  
有同学想问了，那该怎么配置呢？其实很简单，打开你的package.json文件，在这里面照着你的proxy选项配置，配置完成后运行一下，你会发现竟然奇迹的可以了。

### 注意 ###

> 以上教程只针对于使用依赖于webpack服务器的项目，如果是打包过的项目则不支持。

[Link 1]: https://www.webpackjs.com/configuration/dev-server/#devserver-proxy