Django+Vue项目学习第七篇：利用nginx解决跨域问题
传送门：
Django+Vue项目学习第三篇：使用axios发送请求，解决跨域问题，调通前后端
Django+Vue项目学习第四篇：使用axios发送携带参数的get请求
Django+Vue项目学习第五篇：vue+django发送post请求，解决csrf认证问题
Django+Vue项目学习第六篇：vue+django发送post请求，设置不同content-type，前后端如何处理参数
前面在学习django+vue时，通过安装 django-cors-headers包，然后进行了相关的配置来处理跨域请求
今天介绍另一种方法：利用nginx来解决跨域问题
1、安装并启动nginx
关于nginx的安装网上有很多资料，根据自己的运行环境安装即可
安装好后启动nginx，浏览器输入：localhost ，应该可以看到如下页面
2、修改nginx.conf配置
(1) 首先我在A电脑上分别启动了django项目和vue项目
启动django时指定了A电脑的ip，如下
python manage.py runserver 192.168.1.x:8000
也就是说访问后端服务，需要通过这个ip:port才可以
(2)vue项目也部署在A电脑，所以前端的ip也是这个，启动后如下
(3)配置nginx反向代理
打开nginx.conf文件，在server下新增一个location
server {
listen 8089;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
location /create_data {
proxy_pass http://192.168.1.8:8000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr; #获取真实ip
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_buffer_size 4k;
proxy_buffers 4 32k;
proxy_busy_buffers_size 64k;
proxy_temp_file_write_size 64k;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;#获取代理者的真实ip
proxy_redirect off;
}
......
......
......
}
listen和server_name保持不动；
listen 表示nginx监听的端口(这里我把默认的80改为了8089，通过nginx访问代理服务时，使用8089端口)；
server_name指定(虚拟主机)服务器名称，一般会配置域名(example.org ，www.example.org，可以使用精确的名称、通配符名称或正则表达式定义；当你在外网访问一个请求链接时，nginx会根据你填写的主机名称来匹配是转发到哪个server，一个nginx下可以配置多个server)；
location 配置
location /create_data {
proxy_pass http://192.168.1.8:8000;
......
......因为我的django接口都是以 /create_data 为根路由的，所以想要所有以 /create_data 开头的请求都转到这个路由下，因此给这个location配置了/create_datalocation块下的 proxy_pass 配置的是django服务的 ip:port,
综合来看，也就是说通过nginx转发来的请求，如果它是以/create_data开头的，就把它转发到 proxy_pass 配置的服务器上，所以最终的请求是 http://192.168.1.8:8000/create_data/xxx配置好后，重启nginx
(4)修改axios请求
因为我们要通过nginx来反向代理，把前端发的请求通过nginx转发到后端，
所以nginx配置好后，需要修改下前端的请求地址
axios({ url: "http://192.168.1.8:8089/create_data/phone" //如果不指定method，默认发送get请求
}).then(res => { this.info = res.data console.log(res) })
注意这里url的写法，这里要写nginx服务的ip+端口(不要和之前一样，直接写django服务的ip+端口)
可以看到上述ip中，端口号为8089，因为nginx配置文件中监听的端口为8089；
所以整个过程是：
1、前端点击按钮，触发axios请求，客户端发送请求 http://192.168.1.8:8089/create_data/phone
2、8089是nginx监听的端口，所以首先请求会到nginx那里，nginx一看根路径是/create_data，就把它转发给location下配置的 proxy_pass，也就是 http://192.168.1.8:8000
3、最终的请求就是 http://192.168.1.8:8000/create_data/phone，这个ip+port就是django服务的，所以django接收到这个请求，处理后给出响应结果
查看效果
在另一台电脑浏览器输入 http://192.168.1.8:8080/，点击按钮
发现报如下错误
原因是nginx没有设置哪些域名可以跨域，所以nginx.conf需要再加一下配置，设置允许跨域访问，如下标红的地方(我们是通过vue前端来访问，所以需要配置vue项目启动后的访问地址)
location /create_data {
proxy_pass http://192.168.1.8:8000;
add_header Access-Control-Allow-Origin http://192.168.1.8:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr; #获取真实ip
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_buffer_size 4k;
proxy_buffers 4 32k;
proxy_busy_buffers_size 64k;
proxy_temp_file_write_size 64k;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;#获取代理者的真实ip
proxy_redirect off;
}
这样配置也可 add_header Access-Control-Allow-Origin *; # 允许任何域名跨域访问(自己视情况而定)
最后检查一下django项目的settings.py中是否有如下配置
ALLOWED_HOSTS = ['*']
这个默认是[]，如果启动django时指定了ip+端口，则必须改为['*']，不然接口调不通(亲测)
再次访问，发现能够正常拿到响应了
至此，通过nginx解决了前后端的跨域问题
