Python+vue前后端分离交互跨域解决方法之一——nginx反向代理

文章目录

 Python web学习入门之前后端交互跨域解决方法nginx反向代理

---

文章目录

• 系列文章目录
• 前言
• 一、跨域是什么？
• 二、nginx反向代理的使用步骤
  • 1.前后端使用介绍
  • 2.Ngjnx方向代理接口跨域配置
• 总结

---

前言

相信很多小伙伴跟我一样，喜欢前端自学前端，但是在学习前端过程中，有个很大的困难，就是如何进行实战，我们在学习了前端框架后，兴致勃勃想要来搞个自己的网站，历经千辛万苦终于整出了我们满意的界面，但是，接下来怎么跟后端进行交互呢，这里就涉及到前后端分离环境搭建，本片文章我只介绍交互过程中涉及的跨域问题的解决方法。

---

一、跨域是什么？

网上的介绍资料是浏览器不能执行其他网站的脚本。它是由浏览器的同源（域名，协议，端口）策略造成的，是浏览器对JavaScript施加的安全限制。当前端调用处于不同域名或者端口的时候，就会出现跨域问题。

简单来说，就是浏览器使用的域名协议端口，跟我们电脑自身使用的不一样，浏览器自身的安全机制就不允许电脑自身访问，解决方法：就是找一位代理小姐，在它俩间充当对话筒，当然这位代理小姐必须是同时认识它俩滴。接下来介绍nginx代理

二、nginx反向代理的使用步骤

1.前后端使用介绍

后端我是用的是Python的第三方库django，前端采用的是vue框架

 

2.Ngjnx方向代理接口跨域配置

首先同源策略是浏览器上的安全策略，不是HTTP协议的一部分；服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨域问题。

思路如下：

首先需要下载nginx,网上查找一下教程，然后打开它的文件夹，找到conf下的nginx.config文件做一下修改（主机名和ip根据自己电脑的修改，可能不一样）

通过nginx配置一个代理服务器（域名与domin1(localhost)相同，端口不同）做跳板机，反向代理访问domin2（后端运行ip地址）接口，并且可以顺便修改cookie写入，实现跨域登录）

最后浏览器只要访问http://domin1:监听端口号

http://localhost:8001

  location / {
            #root   E:\python\Test1dajian\vue-admin-template\public;
            #index  index.html index.htm;
            proxy_pass http://127.0.0.1:9528;
            proxy_cookie_domain 127.0.0.1 localhost;
             index index.html index.html;
            add_header Access-Control-Allow-Origin http://localhost;
        }

---

总结

以上是本学期因为需要完成python课程设计，自己在前后端分离跨域遇到的问题，个人觉得nginx反向代理解决跨域问题比较方便，不喜互喷哈！