解决跨域问题以及Django中POST传递参数错误

一、跨域

在进行前后端开发的时候需要涉及到跨域的问题,跨域既可以在前端解决也可以在后端解决。前段解决的思路就是转换路径,将发出的请求的url地址转换成可以映射成的地址。后端的解决思路是将获取的地址转换成可以映射的地址。

1. 模型

1.1 前端跨域解决的模型

由于路由router的不同,因此在跨域请求的时候通过更换请求源为origin再对后端进行请求

1.2 后端跨域解决的模型

后端通过可接收的url来进行相同path的处理,揭示了前后端分析的关键点以及跨域解决的本质,即对相同的path进行不同的url的拼接,通过control的控制来调度相同的path。

后端通过可以接受的url,来对其进行路由映射

2. 方法

2.1 后端解决跨域

Django实例

2.1.1 通过以下指令安装corsheaders

# pip安装指令
pip install corsheaders

2.1.2 在配置文件中配置参数

1、进入项目的settings.py文件,进行如下配置

在INSTALLED_APPS中添加corsheaders

结果

2、在settings.py中添加以下的内容

# 设置post的跨域
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

# 添加需要跨域的url
CORS_ORIGIN_WHITELIST = [
    "https://example.com",
    "https://sub.example.com",
    "http://localhost:8080",
    "http://127.0.0.1:9000",
    "http://127.0.0.1:3000"
]

# 允许使用的header
CORS_ALLOW_HEADERS = [
    ‘accept‘,
    ‘accept-encoding‘,
    ‘authorization‘,
    ‘content-type‘,
    ‘dnt‘,
    ‘origin‘,
    ‘user-agent‘,
    ‘x-csrftoken‘,
    ‘x-requested-with‘,
]

结果

2.2 前端解决跨域

Vue实例

2.2.1 在配置文件中配置跨域路由

进入文件./config/index.js中,在ProxyTable中添加以下内容,如果存在多个跨域,就修改/api的名字和target中的内容。

‘/api‘: {
        target: ‘http://127.0.0.1:8000/‘,//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        // secure: false,  // 如果是https接口,需要配置这个参数
        pathRewrite: {
          ‘^/api‘: ‘/‘//这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用‘http://40.00.100.100:3002/user/add‘,直接写‘/api/user/add’即可
        }
      }

结果

目录文件

配置的ProxyTable

2.2.2 调用

通过/api/后端的url地址来进行具体的响应,如我调用login/user.html,就可以书写成/api/login/user.html的url

结果

二、POST请求

在开发的过程中会涉及到请求方式的问题,而在Django中对于post请求是存在问题的,因此使用POST的请求方式的时候需要我们解决POST的冲突。解决post的请求有两个方法:

2.1 使用csrf_token来解决

在post请求的地方加上以下内容

# 添加下面的内容来解决post响应的问题
{% csrf_token %}

结果

2.2 注释掉中间件

注释掉settings.py的MIDDLEWARE中的django.middleware.csrf.CsrfViewMiddleware这个中间件

三、总结

以上是一些自己实践的总结,在网上也有很多方法,可以去尝试。

原文地址:https://www.cnblogs.com/future-dream/p/12001034.html

时间: 2024-11-05 13:47:44

解决跨域问题以及Django中POST传递参数错误的相关文章

前后端分离,解决跨域问题及django的csrf跨站请求保护

1. 前后端分离解决跨域问题 解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现: 关于跨域,前端会先发送OPTIONS请求,进行预检,检查后端是否允许前端设置的相应的请求头,请求内容 function getCookie(name) { var cookieValue = null; if (document.cookie && document.cookie

跨域问题和django中实现跨域

跨域问题 1.同源策略(浏览器的安全功能): 请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同 2.CORS跨域资源共享 实现CORS通信的关键是服务器,只要服务器实现了CORS接口,就可以跨源通信 3.CORS请求分为简单请求和非简单请求 4.只要符合以下两个条件,就是简单请求,否则就是非简单请求 (1) 请求方法是以下三种方法之一: HEAD , GET ,POST (2)HTTP的头信息不超出以下几种字段: Accept, Accept-Language

【学亮IT手记】Ajax跨域问题精讲--jQuery解决跨域操作

什么是跨域 跨域,它是不同的域名(服务器)之间的相互的资源之间的访问. 当协议,域名,端口号任意一个不同,它们就是不同的域. 正常情况下,因为浏览器安全的问题,不同域之间的资源是不可以访问的. 跨域的解决方案 什么情况下会用到跨域? 一般情况,是在自己的内部的工程中会出现跨域的情况. 有三种解决方案: 1.服务器跨域(代理方案) 2.jsonp,<script>标签的开发策略. 3.XHR2,HTML5提供,一般是在移动开发中使用. jQuery解决跨域操作 在jquery中可以使用$.aja

Django 【第二十篇】后端CORS解决跨域问题

一.为什么会有跨域问题? 是因为浏览器的同源策略是对ajax请求进行阻拦了,但是不是所有的请求都给做跨域,像是一般的href属性,a标签什么的都不拦截. 二.解决跨域问题的两种方式 JSONP CORS 三.JSONP 先简单来说一下JSONP,具体详细详见上面JSONP JSONP是json用来跨域的一个东西.原理是通过script标签的跨域特性来绕过同源策略.(创建一个回调函数,然后在远程服务上调用这个函数并且将json数据形式作为参数传递,完成回调). 四.CORS跨域 随着技术的发展,现

Django解决跨域

Django跨域问题 什么是跨域 ''' 通常情况下,A网页访问B服务器资源时,不满足以下三个条件其一就是跨域访问 1. 协议不同 2. 端口不同 3. 主机不同 ''' Django解决跨域 ''' 安装django-cors-headers模块 在settings.py中配置 # 注册app INSTALLED_APPS = [ ... 'corsheaders' ] # 添加中间件 MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddlew

js中ajax如何解决跨域请求

js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操作. 跨域指的协议.域名.端口 有一个不同的情况下都是跨域 例:在本站点请求外站的数据是不允许的 //在本站点请求外站点的资源是不允许的 $(function () { $.ajax({ url: "http://127.0.0.1:14847/Web/jsonp.js", success

HTML5中Access-Control-Allow-Origin解决跨域问题

跨域在开发中一些是一个比较常见的问题虽然有json或者xml来解决,现在html5开始流行了,我们可以通过Access-Control-Allow-Origin解决跨域问题,下面一起来看看. A.abc.com 发起一个到 abc.com/B 的ajax请求,也会有跨域的问题.之所以会有跨域问题,实则是因为www.abc.com其实同A.abc.com一样,也是一个二级域名,而非一级域名(一级域名是http://abc.com) 对于是否允许跨域,更详细的说明可以看下表: URL 说明 是否允许

详解Jquery和AngularJs,Servlet中jsonp解决跨域问题(转)

众所周知,jsonp可以解决跨域问题,下面是我在查阅资料和实际项目使用后的一些总结. Jquery中jsonp的使用 //myUrl = "http://localhost:8090/api/test"; $.ajax({ type:"GET", url:myUrl, dataType:"jsonp", jsonp:"callback", jsonpCallback:"jsonpCallback", suc

vue中解决跨域问题

方法1.后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 方法2.使用JQuery提供的jsonp methods: { getData () { var self = this $.ajax({ url: 'http://f.apiplus.cn/bj11x5.json', type: 'GET', data