跨域问题解决详解 Vue Django

深藏阁楼爱情的钟 2021-09-09 01:32 325阅读 0赞

## 什么是跨域 ##

出于安全考虑，浏览器要求你的网站不能执行/访问其他网站的资源

### 跨域的影响 ###

浏览器本地存储无法使用
    DOM对象、JS对象无法获取
    AJAX无法使用

### 利用HTML标签的特性 ###

script、a、iframe、img、link等

## Vue.js中解决跨域问题 ##

根目录添加配置文件vue.config.js

![在这里插入图片描述][2021071516491791.png]  
target 目标地址  
changeOrigin 变更请求头中设置的host  
pathRewrite URL重写规则

vue.config.js为：

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

## 在Django中解决跨域问题 ##

安装第三方扩展
    pip install django-core-headers
    
    配置 settings.py

INSTALLER_APPS=[
    'corsheaders',
    ]

配置中间件

MIDDLEWARE_CLASSES=[
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheader.middleware.CorsMiddleware',//这一行
    'django.middleware.common.CommonMiddleware',
    ]

添加白名单

CORS_ORIGIN_WHITELIST=(
    'http://127.0.0.1:8080',
    'http://localhost:8080',
    )

可选配置：

#允许哪些请求头
    CORS_ALLOW_HEADERS=('source','icode')
    #允许携带cookie
    CORS_ALLOW_CREDENTIALS = True

[2021071516491791.png]: /images/20210813/17ce5e26a12e4bdea5b6dbf6e43fdba9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，325人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue解决跨域问题

两天有朋友用vue写页面遇到了跨域问题（其实是后台的问题），但是在局域网下也得把数据调过来，我在这里简单总结两种方法吧，希望对大家有帮助。跨域问题的报错是下面这样的...

╰半夏微凉°/ 2024年04月18日 08:51/ 0 赞/ 36 阅读

相关 Vue解决跨域问题

创建Vue项目，在src同级目录下创建vue.config.js文件。 vue.config.js文件内容如下： module.exports = {

野性酷女/ 2023年10月08日 23:27/ 0 赞/ 20 阅读

相关解决Django跨域请求问题

1、安装django 第三方库 django-cors-headers pip install django-cors-headers 2、settings.py 添

朴灿烈づ我的快乐病毒、/ 2022年11月06日 02:56/ 0 赞/ 191 阅读

相关 Django中解决跨域请求问题

Django中解决跨域请求问题参考文章： [（1）Django中解决跨域请求问题][1_Django] （2）https://www.cnblogs.com/GGTom

亦凉/ 2022年09月14日 02:22/ 0 赞/ 187 阅读

相关 django跨域问题解决

在前后端分离开发时，前后端时不同的端口，这就涉及到跨域访问数据问题，因为浏览器的同源策略，默认是不支持两个不同域名间相互访问数据，而我们需要在两个域名间相互传递数据，这时我们就

╰半夏微凉°/ 2022年08月29日 00:26/ 0 赞/ 167 阅读

相关 Django解决跨域问题（django-cors-headers）

Django解决跨域问题（django-cors-headers）参考文章： [（1）Django解决跨域问题（django-cors-headers）][1_Djang

ゞ浴缸里的玫瑰/ 2022年08月28日 11:42/ 0 赞/ 162 阅读

相关 Vue跨域问题终解决

config->index.js->dev->proxyTable\{\} 修改proxyTable\{\}为: proxyTable: { '

我会带着你远行/ 2022年03月21日 04:28/ 0 赞/ 250 阅读

相关 Vue解决跨域问题

在config文件夹下面的index.js里面进行修改这个是3\版本其他版本不一定是这个文件夹 module.exports = { dev:

àì夳堔傛蜴生んèń/ 2022年01月21日 06:11/ 0 赞/ 328 阅读

相关跨域问题解决详解 Vue Django

什么是跨域出于安全考虑，浏览器要求你的网站不能执行/访问其他网站的资源跨域的影响浏览器本地存储无法使用 DOM对象、JS对象无法获取

深藏阁楼爱情的钟/ 2021年09月09日 01:32/ 0 赞/ 326 阅读

相关解决vue的跨域问题

> 使用官方推荐方法进行跨域问题解决 ![71fbc7ebfd09435866efe8801ea111dd.png][] 之前使用vue-jsonp 来解决跨域问题，这次使

你的名字/ 2021年09月04日 05:28/ 0 赞/ 493 阅读