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

  • Z时代
  • 2024-01-10
  • 分类：综合

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

回到顶部