vue axios发送post请求跨域解决

2024-09-05 03:12

本文主要是介绍vue axios发送post请求跨域解决,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

跨越解决有两种方案,后端解决,前端解决。后端解决参考Django跨域解决-CSDN博客

该方法之前试着可以的,但是复制到其他电脑上报错,所以改用前端解决

1、main.js做增加如下配置

import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api/'  //关键代码
axios.defaults.timeout = 5000

2、vue.config.js添加如下

module.exports = {// 输出目录assetsDir: 'static',devServer: {proxy: {'/api/': {target:'http://127.0.0.1:8080/', // 你请求的第三方接口changeOrigin:true, /* 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题 */pathRewrite:{  // 路径重写,/* 替换target中的请求地址 */'^/api/': ''}}},}
};

原理:

因为我们给url加上了前缀/api/,我们访问/xxx/yyy就当于访问了:/api/xxx/yyy

proxy中拦截了/api/,并把/api及其前面的所有替换成了target中的内容,因此实际访问Url是http://127.0.0.1:8080/xxx/yyy

3、vue中的请求

 axios.post('http://127.0.0.1:8080/login/',this.loginForm).then(res=>{})

 改成

 axios.post('/login/',this.loginForm).then(res=>{})

实践发现 npm run serve  从vue前端链接试着解决跨域了

但是npm run build 从django后端地址访问提示路由缺少api

所以要在我的url 都加上前缀api

old urls.py

from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView
from Myapp.views import *urlpatterns = [path('admin/', admin.site.urls),path('', TemplateView.as_view(template_name='index.html')),path('login/', login),  # 登陆path('register/', register),  # 注册
]

修改old urls.py为

from django.contrib import admin
from django.urls import path,include
from django.views.generic import TemplateViewurlpatterns = [path('admin/', admin.site.urls),path('', TemplateView.as_view(template_name='index.html')),path('api/', include('Myapp.urls')), 
]

在项目下新增urls.py 配置如下

from django.urls import path
from Myapp.views import *urlpatterns = [path('login/', login),  # 登陆path('register/', register),  # 注册
]

 项目下urls.py 如下所示

亲测跨域解决

这篇关于vue axios发送post请求跨域解决的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1137809

相关文章

Java中读取YAML文件配置信息常见问题及解决方法

《Java中读取YAML文件配置信息常见问题及解决方法》:本文主要介绍Java中读取YAML文件配置信息常见问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 目录1 使用Spring Boot的@ConfigurationProperties2. 使用@Valu

Python办公自动化实战之打造智能邮件发送工具

《Python办公自动化实战之打造智能邮件发送工具》在数字化办公场景中,邮件自动化是提升工作效率的关键技能,本文将演示如何使用Python的smtplib和email库构建一个支持图文混排,多附件,多... 目录前言一、基础配置:搭建邮件发送框架1.1 邮箱服务准备1.2 核心库导入1.3 基础发送函数二、

Knife4j+Axios+Redis前后端分离架构下的 API 管理与会话方案(最新推荐)

《Knife4j+Axios+Redis前后端分离架构下的API管理与会话方案(最新推荐)》本文主要介绍了Swagger与Knife4j的配置要点、前后端对接方法以及分布式Session实现原理,... 目录一、Swagger 与 Knife4j 的深度理解及配置要点Knife4j 配置关键要点1.Spri

SQL Server配置管理器无法打开的四种解决方法

《SQLServer配置管理器无法打开的四种解决方法》本文总结了SQLServer配置管理器无法打开的四种解决方法,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录方法一:桌面图标进入方法二:运行窗口进入检查版本号对照表php方法三:查找文件路径方法四:检查 S

Redis出现中文乱码的问题及解决

《Redis出现中文乱码的问题及解决》:本文主要介绍Redis出现中文乱码的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 问题的产生2China编程. 问题的解决redihttp://www.chinasem.cns数据进制问题的解决中文乱码问题解决总结

java向微信服务号发送消息的完整步骤实例

《java向微信服务号发送消息的完整步骤实例》:本文主要介绍java向微信服务号发送消息的相关资料,包括申请测试号获取appID/appsecret、关注公众号获取openID、配置消息模板及代码... 目录步骤1. 申请测试系统2. 公众号账号信息3. 关注测试号二维码4. 消息模板接口5. Java测试

Python中Tensorflow无法调用GPU问题的解决方法

《Python中Tensorflow无法调用GPU问题的解决方法》文章详解如何解决TensorFlow在Windows无法识别GPU的问题,需降级至2.10版本,安装匹配CUDA11.2和cuDNN... 当用以下代码查看GPU数量时,gpuspython返回的是一个空列表,说明tensorflow没有找到

解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题

《解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘问题》:本文主要介绍解决未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4... 目录未解析的依赖项:‘net.sf.json-lib:json-lib:jar:2.4‘打开pom.XM

XML重复查询一条Sql语句的解决方法

《XML重复查询一条Sql语句的解决方法》文章分析了XML重复查询与日志失效问题,指出因DTO缺少@Data注解导致日志无法格式化、空指针风险及参数穿透,进而引发性能灾难,解决方案为在Controll... 目录一、核心问题:从SQL重复执行到日志失效二、根因剖析:DTO断裂引发的级联故障三、解决方案:修复

IDEA Maven提示:未解析的依赖项的问题及解决

《IDEAMaven提示:未解析的依赖项的问题及解决》:本文主要介绍IDEAMaven提示:未解析的依赖项的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录IDEA Maven提示:未解析的依编程赖项例如总结IDEA Maven提示:未解析的依赖项例如