跨域问题的解决

最新推荐文章于 2022-11-14 10:42:24 发布

冰镇毛衣

最新推荐文章于 2022-11-14 10:42:24 发布

阅读量177

点赞数

分类专栏：前端文章标签：前端 javascript django vue.js

本文链接：https://blog.csdn.net/sumatray/article/details/127389723

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、什么是跨域

跨域就是浏览器出于安全的考虑，要求你的网站不能执行或者不能访问其他网站的资源。

如何认定为“其他网站”:同源策略

http://www.baidu.com:80
http(s)：协议
www.baidu.com：域名/主机
80：端口(默认)

二、跨域的影响

浏览器本地存储无法使用（Cookie，LocalStorage，IndexDB）
DOM对象，JS对象无法获取
AJAX无法使用

三、跨域问题的解决

利用HTML标签的特性（script，a，iframe，img等）获取其他域的资源。只能解决GET请求
在前端使用代理解决
在服务器端解决，CORS-跨域资源共享，通过添加响应头信息来解决

3.1 在Vue中解决跨域问题

添加配置文件vue.config.js

添加配置

devServer:{
      proxy:{
        '/api':{
          target:'http://localhost:8000',
          changeOrigin:true,
          pathRewrite:{
            '^/api':''  //需要重写的URL
          }
        }
      }
    }

target：目标地址
changeOrigin：变更请求头中设置的host（以xxx的名义进行访问）
pathRewrite：url的重写规则

要访问http://localhost:8080/api/test => 代理http://localhost:8000/test

3.2 在Django中解决跨域问题

安装第三方扩展 pip install django-cors-headers。
配置 settings.py INSTALLED_APPS=[‘corsheaders’]。
配置中间件，放在SessionMiddleware和CommonMiddleware之间
MIDDLEWARE CLASSES = [
django.middleware.security.SecurityMiddleware',
django.contrib.sessions.middleware.SessionMiddleware',
#这个
corsheaders.middleware.CorsMiddleware',
django.middleware.common.CommonMiddleware',
]
4.添加白名单
CORS_ORIGIN_WHITELIST = (
    
    'http://127.0.0.1:8080'

)
5.可选配置
#允许哪些请求头
CORS_ALLOW_HEADERS =('source,'icode)
#允许携带cookie
CORS_ALLOW_CREDENTIALS = True