前后端分离项目的跨域问题

何为跨域：

web开发领域中，经常采用前后端分离模式。这种模式下，前端和后端分别是独立的web应用程序，比如后端是Java 程序，前端是React或Vue应用。各自独立的web app在互相访问时，势必存在跨域问题。解决跨域问题一般有两种思路：

1. CORS：在后端服务器设置HTTP响应头，把你需要运行访问的域名加入加入Access-Control-Allow-Origin中。
2. jsonp：把后端根据请求，构造json数据，并返回，前端用jsonp跨域。

跨域问题便是下面这样：

原因：浏览器的同源策略不允许跨域访问，

何为同源策略：同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。

如何解决跨域问题

跨域的解决办法有很多种，我这里就先说比较简单的两种

• vue 的 proxyTable解决跨域。

index.js中的ProxyTable中具体配置如下:

我这个小测试中使用的是axios数据请求方式：

先在自己的前端项目中引入axios：  

 

axios请求：

• Nginx解决跨域问题。

Nginx针对CORS提供了一种跨域解决方案，比如前端后端存在跨域时，前端和后端如果使用http进行交互，请求会被拒绝。这时候可以通过设置后台服务响应头方式解决。

先配置，找到nginx安装目录下的conf目录，文本方式发开nginx.conf文件，设置如下（我的这个设置了负载均衡和反向代理，希望各位注意）

 upstream test {
		server localhost:8081;
		#server localhost:8082;
	}
	server {
		listen       80;                                                         
		server_name  localhost;                                               
		location / {
	
	    add_header 'Access-Control-Allow-Origin' '$http_origin';
	    add_header 'Access-Control-Allow-Credentials' 'true';
	    add_header 'Access-Control-Allow-Methods' 'POST, GET, OPTIONS, DELETE, PUT';
	    add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
	
	    #跨域OPTIONS请求，set response header后直接204返回
	    if ($request_method = 'OPTIONS') {
	            return 204;
	    }
	
	    proxy_set_header X-Real-IP $remote_addr;
	    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	
	    proxy_pass http://test;
		}
	}

然后在axios请求中：

便可以解决跨域问题。