Nginx避免浏览器同源策略

前段时间做了个VUE商城系统的作业用来熟悉VUE。VUE商城分为商城前端和商城后台，

楼主偷懒不想写服务端的代码。想用简单的json文件进行数据的简单存储。随后问题出现

问题1：突然想起了似乎前端没有IO流的概念。也就是说，简单的json文件只能用来用来读取操作而不可以进行修改

这个时候想到了用json文件中的数据作为初始数据，LocalStroage作为存储。第一次查询的时候用json文件的数据，同时将数据放入LocalStroage中，每一次先判断LocalStroage中有无数据，若没有，则读取json文件。随后问题再出现

该VUE商城分为商城前端和后端，前端服务占用的端口为8080，后端服务占用的端口为8083。
由于浏览器的同源策略，端口不同的服务无法取到对方底下的LocalStroage。数据不能互通，前端后台就就没有意义了。

这时候想到用nginx，将2个服务代理到一个端口下，避免了不同源，应该可以解决这个问题。

这里的环境是Windows10 ，以下是大概使用步骤：

1.下载nginx 的压缩包，并解压某个目录底下。

2.点击nginx.exe开启一个nginx

3.进入nginx目录 ， 打开底下的conf/nginx.conf 文件，进行nginx的简单配置

我的nginx.conf文件大概如下：

Server 底下的listen 是监听的端口，location 是指要代理的路径，这里我们在location 这个红框下重新添加一个代理配置，大抵如下

配置路径的形式有alias和root 2种。

location /t/ {
 alias /www/root/html/new/;
}

用alias来访问/t/index.html的时候，实际访问的是 /www/root/html/new/index.html 。起到替换的作用

location /t/ {
 root /www/root/html/new/;
}

用root来访问/t/index.html的时候，实际访问的是 /www/root/html/new/t/index.html 。会在路径前自动插入

最后问题解决了。一开始是端口不同导致触发浏览器的同源策略，拿不到LocalStroage，这个情况下，VUE商城的前端后端依旧可以使用，但是数据不通，这里我2个服务下都放置了相同的json文件，数据展示没有出问题。但是后台针对商品进行修改后发现，前台的商品依旧没有变化。这是因为2个服务不同网页下，都存储了各自的LocalStroage，数据无法相通。而后通过nginx代理到一个端口底下，数据就通了。