Django+Vue跨域配置与经验

一、原理

同源？同源策略？

同源的定义是：两个页面的协议、端口和域名都相同

同源的例子：

不同源的例子：

同源策略SOP（Same origin policy）是一种浏览器约定，它是浏览器最核心也最基本的安全功能，为了防止浏览器受到XSS、CSFR的攻击，浏览器采用了同源策略，用于限制一个源加载的文档或脚本与另一个源的交互。

在我们的项目中，前端的vue和后端的django分别使用不同的端口，因此受到同源策略的限制，在没有跨域配置的初期，无法进行正常通信。

跨域？什么域？

跨域顾名思义就是一个网域向另一个网域发起资源交互，比如我们的前端http://localhost:9528与后端http://127.0.0.1:8000由于端口号的不同，处在不同的网域（源），因此进行api请求获取资源自然就是违反同源策略的跨域操作。

后端端口：

前端端口：

二、使用CORS解决跨域问题

跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 源 (网域) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

Django CORS

1）安装django-cors-headers模块

pip install django-cors-headers

2） 在settings.py中配置

• 添加应用

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

• 添加中间件

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

• 添加白名单并允许访问白名单

CORS_ORIGIN_WHITELIST = (
    'http://127.0.0.1:8000',
    'http://localhost:9528', #凡是出现在白名单中的域名，都可以访问后端接口
)

CORS_ALLOW_CREDENTIALS = True  # 允许携带cookie

Vue Proxy

在vue.config.js中配置proxy代理

devServer: {
    ...
    proxy: {
      '^/api': {
        target: 'http://127.0.0.1:8000',
        changeOrigin: true,   // 允许跨域
        pathRewriter: {
          '^/api' : ''
        }
      }
    },
    ...
  },

其中，^/api表示以"/api"开头的url将会代理到target对应的网域中，pathRewriter表示将url中的"/api"改写为""，也就是删去。

三、踩坑/经验

1. 在vue.config.js里配置proxy，并修改请求的url后仍无法连接到后端

   • 解决：
     • url最后忘了'/'，导致和后端不匹配，会有404、500等错误
     • 后端服务未打开或出现其他错误，也会报code为500的错
     • api中添加request，记得修改url和baseURL（比如我们使用vue-element-admin，默认是/dev-api，改成空），否则在请求的url中间会多一个/dev-api，取不到数据
     • proxy中的拼写错误也会导致无法处理跨域，比如"pathRewriter"写成"pathRewrite"

2. 在后来实验中，发现Django的CORS和Vue的proxy只需配置其一，就能实现跨域资源共享

四、参考

• https://zhuanlan.zhihu.com/p/92938309
• https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/server.html#%E5%89%8D%E7%AB%AF%E8%AF%B7%E6%B1%82%E6%B5%81%E7%A8%8B
• https://www.cnblogs.com/rain-chenwei/p/9520240.html
• https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS