前后端联调之跨域问题

发表于 更新于 分类于 阅读次数：

本地计算机同时起了 前端 和 后端 项目，想要进行联调。

  • 前端项目为 vue 3.0，端口为 5173
  • 后端项目为 Django，端口为 8000

此时出现了『跨域』问题，需要解决。

开发环境下，vue 会占用一个端口，这里是 localhost:5173，而 djangorestframework 也会占用一个端口，比如 localhost:8000，那么 localhost:5137 需要获取 localhost:8000 的数据进行联调，因此我们将前端 demo 中 RestApi.vue 中请求的接口由 api/users 改为 http://127.0.0.1:8000/users.json

实际开发中通过配置文件来解决这个替换的问题。

实际执行的过程中，get 请求报错的结果如下：

1
Access to XMLHttpRequest at 'http://127.0.0.1:8000/users.json' from origin 'http://localhost:5137' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这里翻译成中文就是，跨域资源共享（CORS）策略阻止了从 localhost:5137 到 127.0.0.1:8000 的访问。那么什么是跨域资源共享 ，这里得解释下：

跨域资源共享的目的是共享，它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 AJAX 只能同源使用的限制。显然，localhost:5137 到 localhost:8000 是不同源的，因此这里使用了跨域资源共享策略。但 CORS 需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE 浏览器不能低于 IE10。

整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS 通信与同源的 AJAX 通信没有差别，代码完全一样。浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信。所以解决『跨域』问题的方法有两种：

  1. 设置服务器端，让它允许 localhost:5137 的跨域访问，上线后再改回来，为什么要改回来呢，因为要避免跨域攻击，详见知乎https://www.zhihu.com/question/26379635[3]。

  2. 将 127.0.0.1:8000 返回的 json 数据复制到 mock 的方式来联调。

看来第二种比较方便，前提是需要学习如何使用 mock 来模拟后端 api。

为了在开发环境联调，我们将第一种方法进行到底，现在修改 django 的配置文件 settings.py 让它允许跨域。

1、安装 django-cors-headers

1
pip install django-cors-headers

2、修改 settings.py

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
INSTALLED_APPS = [
    ......
    'corsheaders',
    ......
]

MIDDLEWARE = [
    ......
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ......
]

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

此时，执行 get 请求顺利完成。

这里，我们填写用户名和邮箱，提交 post 请求后，users 表会新增一条记录，通过 get 请求也可以查询出来，大家可以动手试一试。

实际开发中，我们在请求后端接口时的 url 一般不会填写 ip 地址和端口，而是 ‘api/xxx’ 这种形式，这里是为了展示如何在开发环境进行前后端联调而写成此种形式。