分类:
随笔
一.出现跨域的表现：
项目的前端调用后台接口时候，会报错：
No ‘Access-Control-Allow-Origin’ header is present on the requested resource
二.出现跨域的原因
前端项目是在本地运行的，但是在调用接口时候，接口的地址是其他域名及端口下的地址，此时就会出现跨域问题。
三.如何解决跨域问题：(使用nginx解决跨域问题)
要点先知：
在使用nginx之前先要明确一下的几个概念：
前端项目，后端项目，以及nginx,这就是三个serve项目，它们只是互相之间交流数据；
三个项目都有自己的ip:port组合，哪怕你是在同一台服务器上启动这三个server,它们的port也是不可能有一样的；
所以，前端项目，不论访问nginx还是访问后端项目，都会产生跨域问题。
（1）首先要安装nginx
在官网进行安装，地址是http://nginx.org/en/download.html，然后选择第二个稳定版本，下载即可。
下载完，解压后即可得到目录：
主要的配置文件在文件夹conf的nginx.conf中，想要解决跨域问题就得在此处进行配置。
（2）熟悉简单常用的nginx命令
这些命令需要在cmd端切换到 安装nginx的目录下 进行。
start nginx # 启动nginx --启动的时候，有一个终端会闪退说明启动成功
nginx.exe -s reload # 修改配置后需要重启才生效
nginx.exe -s quit # 关闭nginx
第一步，要启动nginx，启动成功后，访问 localhost:8088,可以看到下面这个界面：
此处为什么是locahost:8088呢，这个配置在nginx.conf 中，如下：
当你下载完打开后默认的配置是80端口，如果该端口被占用的话，你可以配置其他未被占用的端口，比如我这里就是8088
（3）nginx.conf文件配置
目前各个环境下的域名和端口号情况：本地项目在运行的时候，访问的地址是http:loaclhost 3000 用的是3000端口号，配置nginx使用的是8088端口号，也就是http://localhost:8088，我希望http://localhost:3000可以访问到http://test.abc.com这个域名下的接口（可以理解为要调用的一系列接口的公共前缀部分），如果没有通过nginx中转的话，访问时报跨域错误。那该如何解决呢：
1.配置nginx.conf文件
补充：
第一大方块：nginx的访问端口可以修改为没被占用的其他端口，这里设置nginx的访问路径是 http://localhost:8088
第二大方块：注意这里需要添加 proxy_pass 为本地运行的项目地址 http://localhost:3000 ！！！ 当访问 http://localhost:8088 的时候，location会匹配 ’ / ’ 到文件夹根目录下的index.html文件，但这里添加 proxy_pass 后，访问 http://localhost:8088 的时候会代理到 http://localhost:3000，而且你的访问路径显示的还是 http://localhost:8088 ，内容是 http://localhost:3000的
第三大方块：这里location匹配的是 访问 http://localhost:8088/api/.* 路径的时候，在proxy_pass填上需要用到的外域api地址 http://test.abc.com/ ，此时就相当于访问：
http://test.abc.com/ . ，但实际上显示在你眼前的还是原来路径： http://localhost:8088/api/. ，只是你访问这个原路径的时候nginx自动帮你代理到你想要访问的api路径 。但这里有个很重要的细节需要注意： 匹配路径 /api/ 和代理路径 http://test.abc.com/ 后面的斜杠统统都不能少！！！任何一个少了都不行，不信试试，这是nginx的规则。
修改完 nginx.conf 文件后，需要重启nginx ，才会生效 ！！！
2.本地项目配置和访问方式：
在本地项目中，访问接口时，以 /api/.* 这样的格式，然后运行本地项目后（需要先运行），访问 http://locallhost:8088地址，而不是http://localhost:3000。
直接访问http://localhost:3000不会通过nginx中转，而访问http://localhost:8088通过nginx解决了跨域问题。
就像core项目一样，页面访问core后台，core后台去调用其他网站接口，这样就解决跨域了(在后台直接使用httpclient请求接口是不会跨域的),nginx就可以简化这样一个过程。
