Access-Control-Allow-Origin VUE本地调试跨域问题使用nginx解决

最近在使用VUE做前后端分离的项目，页面代码开发好了，连接后台获取数据的时候发现怎么都调不到后台接口，页面F12的信息如下：

如图所示：重点已经圈起来了 （Access-Control-Allow-Origin ），找度娘问了一下，这个报错的意思就是跨域，关于什么是跨域大家自行百度吧，这里就不解释了。下面直接说解决方案：

我这里使用的是：nginx（官网下载吧）
主要进行两方面配置：
1、前端配置（我用的是VUE）：
前端项目原来写法(直接写后台项目的访问地址)：

使用Nginx后的写法:

为什么这么写我后面再做解释。
2、nginx配置
官网下载的nginx解压后结构如下：

打开conf路径下的nginx.conf（刚开始使用如果英文不太好建议把注释掉的没用的信息删除掉）
精简后的nginx.conf内容如下：

这里稍微插一下nginx解决跨域的原理：
不用nginx之前，我们的前端项目直接访问后台项目，然后报跨域；
用nginx之后，我们的前端项目不直接访问后台项目了，转去访问nginx，由nginx代替前端项目去访问后台，后台项目返回的结果也由nginx去转交给前端项目，也就是前后端项目不见面了，由nginx在前后端项目中间调度。
我们主要关注server模块的内容：

这里我们跳过第一部分，先说第二部分的内容：

		#第二部分
		location /s-server {
			proxy_pass http://127.0.0.1:52460/;	    #转换的后台接口
		}

这个配置的作用是，当nginx发现请求中存在字符串“/s-server”的时候就把它替换成“http://127.0.0.1:52460/”
到这里大家就应该明白前面在前端项目中如下写的这行代码的作用了：

var URLCommonPrefix = "/s-server";
var URL = {
    login: URLCommonPrefix + 'checkUserAndPass/checkUserAndPass',
    }

我在前端所有的接口前面拼接了“/s-server”，目的就是在nginx中把它替换成真正的后台地址。

再来看第三部分：

		#第三部分
		location / {
			proxy_pass http://127.0.0.1:8081/;	    #转换的前端接口
		}

这个配置的作用是:
就我当前项目而言，所有不包含“/s-erver”字符串的请求都会被nginx转换成前端页面的跳转链接。

现在把配置好的前端项目、后台项目和nginx启动起来：
①nginx启动，双击解压根目录下的nginx.exe文件，会有黑框一闪而过，这时nginx就已经启动起来了，不必多次双击
②后台项目启动，我用的.net，vs正常启动
③前端项目，我用的VUE，在VScode终端窗口输入命令：cnpm run dev 回车
VUE启动后会提示如下：

这时我们使用前端项目启动后提示的链接（http://127.0.0.1:8081）访问项目：

what?
还是这个错误，别着急，是时候解释nginx.conf文件中我们选中的第一部分配置的作用了，：

		#第一部分
		listen	8088;
		server_name 127.0.0.1:8088;                 #侦听的端口号

我们既然选择了使用nginx解决跨域问题，那么我们访问项目的时候就需要注意了，前端项目（VUE）使用命令run起来以后提示的访问链接我们就不能使用了，否则还会出现跨域，因为这样等于nginx配好了但是我们没用。要想解决问题，我们要使用在nginx.conf中配置的侦听端口链接访问。现在试试：访问http://127.0.0.1:8088

结束

如有错误，请指摘，谢谢。