解决跨域问题以及django中post传递参数错误(代码片段)

future-dream future-dream     2023-04-23     402

关键词:

一、跨域

在进行前后端开发的时候需要涉及到跨域的问题,跨域既可以在前端解决也可以在后端解决。前段解决的思路就是转换路径,将发出的请求的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这个中间件

技术图片

三、总结

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

django解决跨域问题(代码片段)

首先需要定义一个中间件fromdjango.utils.deprecationimportMiddlewareMixinclassCorsMiddleware(MiddlewareMixin):defprocess_response(self,request,response):response["Access-Control-Allow-Headers"]="Content-Type"      #get请求response["Access-Control-Allow-Origin"]="http://localho... 查看详情

在Django中传递参数以形成动作?

...ngparameterstoformactioninDjango?【发布时间】:2011-08-2609:12:35【问题描述】:模板:<formmethod="post"action="/reply/feed.id/">rform.as_p<inputtype="submit"value="send"/></form>和网址:(r\'^r 查看详情

django给echarts传递参数的问题?

...但如果不是给echarts传递就不会有这个问题,请问有什么解决的办法?参考技术A楼主的问题讲述的不太清楚,如果是传参问题,试试这个:views中的参数:echart中的参数: 参考技术B现在想把一个数组传递到echarts得data中,例如传... 查看详情

如何从 Sentry 错误报告中过滤敏感的 Django POST 参数?

...arametersoutofSentryerrorreports?【发布时间】:2014-07-1118:42:45【问题描述】:引用Djangodocs:@sensitive_post_parameters(\'pass_word\',\'credit_card_number\')defrec 查看详情

django解决跨域问题(代码片段)

搬运: https://www.cnblogs.com/vipchenwei/p/7866470.html1.安装django-cors-headers模块2.在INSTALLED_APPS中注册 corsheadersINSTALLED_APPS=[‘django.contrib.admin‘,‘django.contrib.auth‘,‘django.contrib.contenttypes‘,‘django.contrib.sessions‘,‘django.contrib.messages... 查看详情

vue前后端分离(代码片段)

...都相同才叫同源.跨域http,ip,post三个有一个不同,就是跨域.解决跨域问题1)Django按照cors模块:>:pipinstalldjango-cors-headers2)在 查看详情

jmeter随笔--post接口参数化问题

...化设置,在这里总结一下测试的过程中遇到的问题,以及解决方式:一、使用bodydata设置参数:1,首先,使用Fiddler录制post请求,并发送成功,导成jmx格式,并用jmeter打开;2,此时,不设置参数,运行,OK,运行成功,其传递的... 查看详情

如何将 POST 数据中的 CSRF 令牌传递给 Django?

...opassCSRFtokeninPOSTdatatoDjango?【发布时间】:2021-01-0411:40:27【问题描述】:我正在开发一个带有Django后端和Next.js前端的应用程序。我正在尝试使用fetchAPI将数据从前端发布到后端。我在将POST数据中的有效CSRF令牌传递给Django时遇到问... 查看详情

org.springframework.http.converter.httpmessagenotreadableexception:requiredrequestbody错误解决方案

...rk.http.converter.HttpMessageNotReadableException:Requiredrequestbody错误解决方案:显而易见前端传递数据不符合后端实体类。问题一:后端实体类与前端传参数据不一致,检查前端传参数据和后端接收数据实体类。问题二:@Reques... 查看详情

django-cors-headers解决跨域问题(代码片段)

Django-cors-headers解决django开发中遇到的跨域访问资源问题github地址:https://github.com/adamchainz/django-cors-headers首先安装Django-cors-headers扩展类#安装django-cors-headers解决跨域问题:pipinstalldjango-cors-headers添加应用INSTALLED_APP 查看详情

django前后端分离开发解决跨域问题(代码片段)

django前后端分离开发解决跨域问题利用django-cors-headers插件来解决前后端分离时遇到的跨域问题第一步安装django-cors-headerspipinstalldjango-cors-headers第二步在settings.py文件中进行配置在INSTALLED_APPS里添加"corsheaders"INSTALLED_APPS=[...... 查看详情

我想用 URL POST 方法在字典参数中传递数组

...ost时如何完成?我尝试了示例代码,但没有找到我的确切解决方案。下面是我的示例 查看详情

django解决csrf跨域问题总结(代码片段)

...xff1a;使用postman测试后台服务接口提示如下截图错误信息 解决办法:方式一:注释Django中间件之django.middleware.csrf.CsrfViewMiddlewareDjango项目中间件配置文件位置:Django项目相对路径/settings.py 方式二:通过导入csrf_exempt 装... 查看详情

如何在 django 2 中将 url 中的 # 作为参数传递

...topass#inurlasaparameterindjango2【发布时间】:2020-01-1704:37:52【问题描述】:我正在尝试传递代码“Req-2019#000001”DjangoURL。我想在URL中传递此代码以及普通字符串和数字作为参数。path(\'generateBomForSingleProduct/<requisition_no> 查看详情

Postman 400 错误请求

...误请求400错误。无法弄清楚出了什么问题以及如何调试和解决问题。有人可以帮我吗?谢 查看详情

使用django-cors-headers来解决跨域问题

ALLOWED_HOSTS=["*"]#ApplicationdefinitionINSTALLED_APPS=[‘django.contrib.admin‘,‘django.contrib.auth‘,‘django.contrib.contenttypes‘,‘django.contrib.sessions‘,‘django.contrib.messages‘,‘django.contrib.staticfiles‘,‘graphene_django‘,‘corsheaders‘,*************]#允许... 查看详情

angular.js跨域post解决方案

跨域,前端开发中经常遇到的问题,AngularJS实现跨域方式类似于Ajax,使用CORS机制。下面阐述一下AngularJS中使用$http实现跨域请求数据。AngularJSXMLHttpRequest:$http用于读取远程服务器的数据$http.post(url,data,[config]).success(function(){...});... 查看详情

在 Django POST 请求中使用数组参数

...rayparametersinaDjangoPOSTrequest【发布时间】:2018-04-1115:23:11【问题描述】:如何将数组参数发布到django后端?我正在使用一个jQuery插件(DataTables编辑器),它发布一个数据数组参数,如data[id][fieldname][value]如何让django接受和使用这些... 查看详情