nginx无服务跨域配置

问题描述

首先，我用vue框架搭建了一个登录、注册界面，其中用到了mysql、express、axios和element ui, 其中mysql和express用于搭建了后台登录服务器，axios用于从后台获取用户登录信息，element ui用于搭界面。
axios要想从本地服务器获取数据，就必须处理跨域（cross-origin）问题，所谓跨域从字面上理解，就是跨区域 , 意思是当一个客户端去访问某一个不在本区域的服务器时，或者说客户端访问了一个不同源的服务器时，出现cross-origin的问题。

跨域问题的解决方法

配置代理

正向代理（面向客户端）

正向代理的典型例子，就是vpn, 就是客户端将请求发送到代理服务器，然后客户端的请求就由代理服务器代为转发，此时客户端是明确知道要发送请求的目的服务器。如图所示：

反向代理(面向服务器)

就是把客户端的请求通过代理服务器发送到不同的服务中，此时客户端并不知道自己的请求发送到了哪一个服务器中，该代理服务器是面向服务器服务的，通过设置逆向代理服务器，可以转发客户端的请求到不同的服务器中 。因此，反向代理就可以解决跨域问题。当客户发送请求时，都通过反向代理服务器代为转发，此时就不存在跨域问题了。如图所示：

vue项目中的代理设置

TODO: 如果用的是vue-cli@4来搭建的项目，那么默认的项目中是没有配置文件或配置目录的，此时你要在自己的项目的根目录，即与package.json同一目录中创建一个配置文件vue.config.js，因为我们要在此文件中配置代理。代理配置格式如下：

module.exports={
	devServer: {
		proxy: {
			'/api' : { // 代理接口名字
				target: 'http://127.0.0.1:3000/api/' // 代理的路径
				changeOrigin: true, //是否改变源，如果要跨域，就写true，否则写false
				pathRewrite: {// 路径重写
					'^/api': '' //就是将所有以/api开头的url路径全部重定向到target所指向的路径，
					//例如'/api/user/login' 就会被重新写为'http://127.0.0.1:3000/api/user/login'
				}
			}
		}
	}
}

nginx服务器的代理设置

在conf目录中的nginx.conf文件中的server中配置一项location ^~/api/ { proxy_pass http://127.0.0.1:3000/api/ },重要的事情说三遍，一定要在/api/前面加^~!!!!一定要在’/api/'前面加^~!!!一定要在/api/前面加^~!!!。如图所示：