Django+vue跨域问题解决的详细步骤

跨域

由于开发模式为前后端分离式开发,故而通常情况下,前端和后端可能运行不同的ip或者port下,导致出现跨域问题,故而单独说明

什么是跨域

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。

其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景。

什么是同源策略?

同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

同源策略限制以下几种行为:

  1. Cookie、LocalStorage 和 IndexDB 无法读取
  2. DOM 和 Js对象无法获得
  3. AJAX 请求不能发送

跨域错误浏览器会在控制台中出现如下错误:

报错信息如下:

Access to XMLHttpRequest at ' http://127.0.0.1 :8000/api/test/' from origin ' http://127.0.0.1 :3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

翻译过来即是:从源地址 http://127.0.0.1 :3000 发起的到 http://127.0.0.1 :8000/api/test/ 的XMLHttpRequest访问违反了同源策略:因为在请求头中没有Access-Control-Allow-Origin的值

前端解决跨域

参考博客

既然跨域是因为不同源,那我同源不就完事儿了,但是后端请求地址不可能改变,所以可以在前端和后端的中间加一层代理,前端通过代理访问后端。

在Vue-cli工具中已经提供了代理的功能,只需要配置即可。

在根目录下的config/index.js文件中有如下配置项:

proxyTable: {
   '/': {
    target: 'http://127.0.0.1:8000/',
    changeOrigin: true,
    pathRewrite: {
     '^/api': ''
    }
   }
  },
  1. '/'表示以'/'(即所有的路径)开头的路径均需要代理,
  2. target:代理的目标服务器地址(即后端服务器地址)为 ' http://127.0.0.1 :8000/',
  3. changeOrigin,为修改源:修改请求中的源地址
  4. pathReWrite:URL路径重写,对于以'/api'开头的路径将'/api'替换为''

后端解决跨域

参考博客

后端出于安全考虑,也会对于跨域有限制,解决方法如下:

安装django-cors-headers

$ pip install django-cors-headers

配置settings.py文件

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

MIDDLEWARE_CLASSES = (
  ...
  'corsheaders.middleware.CorsMiddleware',
  'django.middleware.common.CommonMiddleware', # 注意顺序
  ...
)
#跨域增加忽略
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
  '*'
)

CORS_ALLOW_METHODS = (
  'DELETE',
  'GET',
  'OPTIONS',
  'PATCH',
  'POST',
  'PUT',
  'VIEW',
)

CORS_ALLOW_HEADERS = (
  'XMLHttpRequest',
  'X_FILENAME',
  'accept-encoding',
  'authorization',
  'content-type',
  'dnt',
  'origin',
  'user-agent',
  'x-csrftoken',
  'x-requested-with',
  'Pragma',
)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Django+Vue跨域环境配置详解

    概述 在使用Django+Vue开发过程中,遇到了很多开发环境相关的问题,比如跨域,比如ajax请求参数等,本篇文章主要记录解决在开发过程中,遇到的一些问题. 跨域不带Cookie 在使用Vue脚手架开发的过程中,会使用Vue脚手架自带的Server进行项目调试,Vue自带的Server支持 hot reloading ,这个特性是非常好用的.但是在开发过程中,因为要与后端交互,所以在请求后端接口的时候,会遇到跨域问题,这个问题在一些职责划分清楚的团队并不存在,因为前端开发人员会才用Mock数据

  • 浅谈django rest jwt vue 跨域问题

    django rest framework 使用 router 注册url时,访问接口 包302错误 可能是因为请求url 写法有问题, 如请求 /api/login/ 报302 ,需要去掉后面的反斜杠,正确写法 /api/login 请求跨域: 跨域: 简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容.这显然是不安全的.为此,浏览器的鼻祖:网景(Netscape)公司提出了优秀的解决方案:著名的浏览器同源策略.现在所有支持JavaScript的浏览

  • Django+vue跨域问题解决的详细步骤

    跨域 由于开发模式为前后端分离式开发,故而通常情况下,前端和后端可能运行不同的ip或者port下,导致出现跨域问题,故而单独说明 什么是跨域 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景. 什么是同源策略? 同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS.

  • vue+springboot前后端分离实现单点登录跨域问题解决方法

    最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,

  • 前端跨域问题解决及七大跨域原理详解

    目录 为什么跨域? 跨域的时机? 同域情况 && 跨域情况? 解决跨域的方案 JSONP WebSocket Cors Node接口代理 Nginx postMessage document.domain && iframe 咱们做前端的,平时跟后端对接接口那是必须的事情,但是可能很多同学忽略了一个对接过程中可能会发生的问题——跨域,那跨域到底是啥呢?为什么会跨域呢?又怎么才能解决呢? 为什么跨域? 为什么会出现跨域问题呢?那就不得不讲浏览器的同源策略了,它规定了协议号-域

  • 前端面试必会网络跨域问题解决方法

    目录 什么是跨域 跨域解决方法1-代理 跨域解决方法2-JSONP 跨域解决方法3-CORS 概述 简单请求 简单请求的判定 简单请求的交互规范 需要预检的请求 附带身份凭证的请求 一个额外的补充 什么是跨域 浏览器有一个重要的安全策略,称之为「同源策略」 其中,源=协议+主机+端口源=协议+主机+端口源=协议+主机+端口,两个源相同,称之为同源,两个源不同,称之为跨源或跨域 比如: 源 1 源 2 是否同源 www.baidu.com www.baidu.com/news www.baidu.

  • Spring MVC中自带的跨域问题解决方法

    前言 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制.本文将详细介绍关于Spring MVC跨域问题解决的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 问题 使用Spring mvc 开发了一个Restful 接口 供前端调用 @PostMapping("/search") public List<Map> search(@RequestBody QueryParams qu

  • Spring Boot和Vue跨域请求问题原理解析

    这篇文章主要介绍了Spring Boot和Vue跨域请求问题原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 使用Spring Boot + Vue 做前后端分离项目搭建,实现登录时,出现跨域请求 Access to XMLHttpRequest at 'http://localhost/open/login' from origin 'http://localhost:8080' has been blocked by CORS pol

  • 记一次vue跨域的解决

    好久不见,今天想写的是前段时间碰到的一个小问题.其实故事背景是前端的同学跟我说他们前端请求不了我后端的数据,说是跨域了. 其实跨域的问题,在如今前后端的时代非常常见,如果图方便的话,一般是在后端的请求以及拦截器中设置header,但是有一些业务需求单纯后端是解决不了的.还是需要前端自行来处理,这次碰到的就是前端需要自行处理的情况. 这里我不细说跨域的解决方案,只聊聊我是怎么解决的.如果大家想要知道更详细的跨域知识,可以点个在看!我下次写一个专题. vue跨域代理解决方案 其实需求比较简单,就是先

  • VUE跨域详解以及常用解决跨域的方法

    目录 跨域 解决跨域常用方法: 一.VUE中常用proxy来解决跨域问题 二.JSONP解决跨域 三.CORS是跨域资源共享(Cross-Origin Resource Sharing),以 ajax 跨域请求资源,支持现代浏览器,IE支持10以上 四.iframe实现跨域 总结 跨域 当我们遇到请求后台接口遇到 Access-Control-Allow-Origin 时,那说明跨域了. 跨域是因为浏览器的同源策略所导致,同源策略(Same origin policy)是一种约定,它是浏览器最核

  • vue-admin-template解决登录和跨域问题解决

    目录 一.下载安装项目 二.修改登录访问地址 三.解决跨域问题 一.下载安装项目 git地址:https://github.com/PanJiaChen/vue-admin-template.git 二.修改登录访问地址 找到 .env.develpment文件 # just a flag ENV = 'development' # base api # VUE_APP_BASE_API = '/dev-api' VUE_APP_BASE_API = 'http://localhost:9001

随机推荐