Django+Vue项目学习第七篇:利用nginx解决跨域问题

vue

传送门:

Django+Vue项目学习第一篇:django后台搭建

Django+Vue项目学习第二篇:vue项目创建 

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_data

location块下的 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解决了前后端的跨域问题

以上是 Django+Vue项目学习第七篇:利用nginx解决跨域问题 的全部内容, 来源链接: utcz.com/z/379441.html

回到顶部