vue axios发送post请求跨域解决

news2024/9/24 7:25:52

跨越解决有两种方案,后端解决,前端解决。后端解决参考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 TemplateView

urlpatterns = [
    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 如下所示

亲测跨域解决

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Spring1~~~

快速入门 javaBean规范要有set方法&#xff0c;底层反射赋值 <!-- id表示在该java对象在spring容器中的id--><bean class"spring.bean.Monster" id"monster01"><property name"Id" value"100"/><property nam…

Unity数据持久化 之 向文件流读写(详细Plus版)

本文仅作笔记学习和分享&#xff0c;不用做任何商业用途 本文包括但不限于unity官方手册&#xff0c;unity唐老狮等教程知识&#xff0c;如有不足还请斧正​​ 在 Unity 手册中&#xff0c;FileStream 并没有单独的详细介绍&#xff0c;因为它是 .NET 框架的一部分&#xff0c;…

已经存在的项目如何变成git的一个repository

已经存在的项目如何被git管理 背景&#xff1a; 有一套代码很敏感&#xff0c;可能动不动就要不能正常工作(硬件开发常事)&#xff0c;那改动一下下就要有个记录&#xff0c;就决定用git管理 已经有了服务里里docker里运行的gitbucket,已经有了开发用的电脑上的git客户端&…

c++ websocket简单讲解

只做简单讲解。 一.定义和原理 WebSocket 是从 HTML5 开始⽀持的⼀种⽹⻚端和服务端保持⻓连接的消息推送机制&#xff0c;传统的 web 程序都是属于 "⼀问⼀答" 的形式&#xff0c;即客⼾端给服务器发送了⼀个 HTTP 请求&#xff0c;服务器给客⼾端返回⼀个 HTTP 响…

亿发进销存一体化解决方案:多终端无缝协同,赋能企业全业务-上

亿发软件凭借对产品、市场、业务的深入理解&#xff0c;在进销存基础上进行了延伸&#xff0c;推出多终端、一体化的“进销存管理系统”多元产品矩阵。在技术上实现电脑端、手机端、PDA端、零售端、商家版以及小程序商城的多终端无缝对接。各个端口间的数据可以互通互联&#x…

Prometheus Blackbox监控网站

Blackbox Exporter简介 blackbox_exporter 是 Prometheus 拿来对 http/https、tcp、icmp、dns、进行的黑盒监控工具&#xff0c;也就是从服务、主机等外部进行探测&#xff0c;来查看服务、主机等是否可用。 Blackbox Exporter 默认端口是 9115&#xff0c; 安装1 wget htt…

模电-三极管2

学习资料&#xff1a; 12-放大电路的分析方法_4K_哔哩哔哩_bilibili 如何向老奶奶解释数据库 如何向幼儿解释能量守恒 内容有误&#xff0c;无法保证一定正确&#xff0c;请各自深入学习 大学的知识连贯性很强&#xff0c;没有前面的基础&#xff0c;无法对后面的知识进行&a…

2023 ICPC 江西省赛K. Split

K. Split time limit per test: 3 seconds memory limit per test: 512 megabytes You are given a positive integer n and a non-increasing sequence ai of length n , satisfying ∀i∈[1,n−1],. Then, you are given a positive integer m, which represents the tot…

新版英语教材变化,强调应用与素养并重

随着新学期的到来&#xff0c;2024年新版义务教育英语教材正式在全国范围内投入使用&#xff0c;这一变化不仅在教育界引起了广泛关注&#xff0c;也触动了无数家长的心弦。新版教材在内容、难度及教学理念上的全面升级&#xff0c;既为孩子们提供了更广阔的学习空间&#xff0…

STM32智能家居语音系统

简介 基于STM32构建的智能家居语音控制系统&#xff0c;采用ESP8266&#xff08;01s&#xff09;作为关键的WiFi模块。这一系统通过机智云开发平台实现与ESP8266的高效通信&#xff0c;遵循平台规范的协议&#xff0c;确保数据的可靠传输。系统支持WIFI_AIRLINK_MODE&#xff0…

免邀请码下载时代已来临,Xinstall为您保驾护航

在App推广的道路上&#xff0c;邀请码下载一直是一个让人头疼的问题。用户需要输入繁琐的邀请码才能完成下载&#xff0c;这不仅增加了用户的操作难度&#xff0c;也影响了App的推广效果。然而&#xff0c;随着Xinstall的免邀请码下载功能的推出&#xff0c;这一问题终于得到了…

VISION TRANSFORMER ADAPTER FORDENSE PREDICTIONS

总结 提出了一种新范式&#xff1a; 开发了 Vision Transformer Adapter (ViT-Adapter)&#xff0c;通过引入无预训练的适配器将视觉特定的归纳偏差&#xff08;例如局部空间信息&#xff09;引入普通 ViT&#xff0c;适应密集预测任务。 保留 ViT 灵活性&#xff1a; 与设计…

Linux日志-lastlog日志

作者介绍&#xff1a;简历上没有一个精通的运维工程师。希望大家多多关注作者&#xff0c;下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 Linux 系统中的日志是记录系统活动和事件的重要工具&#xff0c;它们可以帮助管理员监视系统状态、调查问题以及了解系统运行…

【动态规划专栏】专题一总结

本专栏内容为&#xff1a;算法学习专栏&#xff0c;分为优选算法专栏&#xff0c;贪心算法专栏&#xff0c;动态规划专栏以及递归&#xff0c;搜索与回溯算法专栏四部分。 通过本专栏的深入学习&#xff0c;你可以了解并掌握算法。 &#x1f493;博主csdn个人主页&#xff1a;小…

电脑错误mfc140.dll丢失怎么办?mfc140.dll丢失如何修复?

在使用基于Microsoft Visual Studio 2015开发的应用程序时&#xff0c;可能会遇到个别组件影响整体功能的情况&#xff0c;其中“mfc140.dll丢失”错误就是常见的一个技术障碍。这个DLL文件属于Microsoft Foundation Class (MFC) Library&#xff0c;它对Windows应用程序的运行…

基于vue框架的朝阳保险公司营销管理系统0wamc(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;用户,保险信息,保险类型,订单信息,赔偿信息,联系我们,购买指南,到期提醒 开题报告内容 基于Vue框架的朝阳保险公司营销管理系统的开题报告 一、研究背景 随着保险行业的快速发展和市场竞争的日益激烈&#xff0c;传统的管理模式已难以…

恶意代码分析 | Lab1

前言 穿插virus分析的学习&#xff0c;毕竟逆向技术最后要用在攻防中。 Lab1就没必要动态分析了&#xff0c;静态学学写法。 Lab01-01.exe 前面是内存映射技术&#xff0c;对内存进行修改操作。 将Kernel32.dll和Lab01-01.dll的内存都Map出来&#xff0c;便于后续更改&…

有没有性价比高一些的开放式耳机推荐?盘点四款高性价比蓝牙耳机

在正式介绍几款高性价比产品&#xff0c;先来和各位聊聊什么是开放式耳机。开放式耳机是目前比较流行的耳机种类&#xff0c;其特点是通过采用海绵状的微孔发泡塑料制作透声耳垫&#xff0c;不堵塞耳道&#xff0c;使得声音可以泄露&#xff0c;同时佩戴者也能听到外界声音 。 …

民宿酒店预订系统V1.0.8

多门店民宿酒店预订管理系统&#xff0c;快速部署属于自己民宿酒店的预订小程序&#xff0c;包含预订、退房、WIFI连接、吐槽、周边信息等功能。提供全部无加密源代码&#xff0c;支持私有化部署。 V1.0.8修复房间预订状态无法筛选的问题 修复房间预订状态无法筛选的问题 修复…

为自闭症儿童提供全方位支持的自闭症全托管机构

在自闭症儿童的世界里&#xff0c;每一个细微的进步都凝聚着家庭与社会的无尽努力与期盼。星启帆自闭症儿童康复机构&#xff0c;作为一所致力于为自闭症儿童提供全方位支持的全托管机构&#xff0c;正以其专业的服务、温馨的环境和全面的康复计划&#xff0c;成为众多家庭信赖…