webpack如何跨域和打包线上如何用nginx跨域？

首先项目的前后端完全分离，并且前端和后端各用了一个服务，也就是两个服务，方便前后端各自分开开发； 在前端用react开发完之后，一般都是用的webpack来开启前端服务，然后后端也同时开启对应的后端服务。

第一种情况：前端和后端代码都在本地。

此时本地的前后端服务分别是：

前端：http://localhost:8888

后端：http://localhost:8085

而前端代码中一般都会有大量需要访问后端API接口的功能，因为前后端是不同的两个服务，因此会涉及到跨域访问后端API接口;

这个时候就需要对webpack的devServer这个属性进行代理配置，

 devServer:{
		// 配置代理
		proxy: {
			'/': {
				target:"http://localhost:8085" 
			}
		}
	}, 

如下图：

图1

这样本地的前端项目就能访问本地后端服务 （http://localhost:8085） 的API接口了，如下图就是访问本地后端项目的其中一个接口的情况，如下图：

图2

虽然图中的

http://localhost:8888/api/details/querypage?current=1&pageSize=10

这个接口前面是以前端服务的

http://localhost:8888开始，但是由于对webpack设置了代理，

因此实际是访问的后端服务

http://localhost:8085再加上接口地址；

而【状态代码：200】表示接口调用成功并返回了接口数据；

响应标头的【access-control-allow-origin: *】表示后端的允许跨域，代码如下图：

httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");

图3

这样数据就能返回给前端了。

第二种情况：前端代码在本地，后端代码在服务器上。

此时本地的前端服务和服务器上面的后端服务分别是：

前端：http://localhost:8888

后端：http://【这里是服务器的地址】:8085

这时候前端的代理中的

http://localhost:8085改为http://【这里是服务器的地址】:8085，

 devServer:{
		// 配置代理
		proxy: {
			'/': {
				target:"http://xxx.xxx.xxx.xx:8085" 
			}
		}
	}, 

如下图：

图4

第三种情况：前端代码和后端代码都在服务器上。

此时在服务器上面的前端服务和后端服务分别是：

前端：http://web.yydpt.com/ 这里的前端是设置了域名；

后端：http://【这里是服务器的地址】:8085

react前端代码需要先在本地编译发布，之后将编译的代码放到服务器上面去，由于在服务器上面的前后端是两个不同的服务，不是一个服务，因此也会有跨域问题，

这个时候的前端webpack的代理也会失效，如下图：

图5

图6

而服务器上面的前端服务是用Nginx进行的反向代理，代码：

#自定义的项目服务

server {listen *:80;server_nameweb.yydpt.com; // 配置的前端服务，用的域名root /home/yydpt/webproject/webbase/development;location /webbase {proxy_pass http://127.0.0.1:9999;proxy_set_header Host $host:80;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;} //代理后端的接口location /api {proxy_pass http://xxx.xxx.xxx.xx:8085;}
} 

如下图：

图7

效果图：

图8