vue2-vue项目中你是如何解决跨域的?

1、跨域是什么?
跨域本质是浏览器基于同源策略的一种安全手段。
同源策略(sameoriginpolicy),是一种约定,它是浏览器最核心也是最基本的安全功能。
所谓同源(即指在同一个域)具有以下三个相同点:
协议相同(protocol)
主机相同(host)
端口相同(port)

反之非同源请求,也就是协议,端口,主机其中一项不相同的时候,这个时候就会产生跨域。

一定要注意跨域是浏览器的限制,你用抓包工具抓取接口数据,是可以看到接口已经把数据返回回来了,只是浏览器的限制,你获取不到数据,用postman请求接口能够请求到数据。这些再次印证了跨域是浏览器的限制。

2、如何解决
解决跨域的方法有很多种,常用的有三种,分别为:
JSONP
CORS
Proxy
而在vue项目中,主要针对CORS和Proxy这两种方案进行展开。

CORS:(Cross-Origin Resource Sharing,跨域资源共享)是一个系统,它由一系列传输的http头组成,这些http头决定浏览器是否阻止前端javascript代码获取跨域请求的响应。
CORS实现起来特别方便,只需要增加一些http头,让服务器能声明允许的访问来源,只要后端实现了CORS,就实现了跨域
在这里插入图片描述
以koa框架举例
添加中间件,直接设置Access-Control-Allow-Origin响应头
在这里插入图片描述
注:Access-Control-Allow-Origin设置为”*“其实意义不大,可以说形同虚设,实际应用中,上线前我们会将Access-Control-Allow-Origin值设置为我们目标host

Proxy:代理(proxy)也称网络代理,是一种特殊的网络服务,允许一个(一般为客户端)通过这个服务与另一个网络终端(一般成为服务端)进行非直接的连接。一些网关、路由器等网络设备具备网络代理功能。一般认为代理服务有利于保障网络终端的隐私或安全,防止攻击。

方案1:
如果是通过vue-cli脚手架工具搭建项目,可以通过webpack为我们起一个本地服务器作为请求的代理对象。通过该服务器转发请求至目标服务器,得到的结果再转发给前端,但是最终发布上线时如果web应用和接口服务器不在一起仍会跨域。
在vue.config.js文件,新增以下代码:
在这里插入图片描述
通过axios发送请求时,配置请求的根路径。
在这里插入图片描述
此外,还可以通过服务端实现代理请求转发。
以express框架为例
在这里插入图片描述
方案3
通过配置nginx实现代理。
在这里插入图片描述

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

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

相关文章

学C的第三十二天【动态内存管理】

相关代码gitee自取:C语言学习日记: 加油努力 (gitee.com) 接上期: 学C的第三十一天【通讯录的实现】_高高的胖子的博客-CSDN博客 1 . 为什么存在动态内存分配 学到现在认识的内存开辟方式有两种: 创建变量: int val …

C# Blazor 学习笔记(0.1):如何开始Blazor和vs基本设置

文章目录 前言资源推荐环境如何开始Blazor个人推荐设置注释快捷键热重载设置 前言 Blazor简单来说就是微软提供的.NET 前端框架。使用 WebAssembly的“云浏览器”,集成了Vue,React,Angular等知名前端框架的特点。 资源推荐 微软官方文档 Blazor入门基础视频合集 …

vscode无法连接远程服务器的可能原因:远程服务器磁盘爆了

vscode输入密码后一直等待,无法进入远程服务器终端: 同时Remote-SSH输出包含以下内容 在日志中的以下几个部分: [17:15:05.529] > wget download failed 这表明VS Code尝试在远程服务器上下载VS Code服务器时失败了。> Cannot write…

【vue】vue 里面使用 v-html 插入的文本带有换行符‘\n‘不换行

最近开发vue2 项目 &#xff0c;接口返回的是类似于这样的数据&#xff1a;我是第一行的哦\n我是第二行的哦 我是直接这样渲染的&#xff0c; //html <p v-htmltext></p>//渲染值 this.text "我是第一行的哦\n我是第二行的哦"但结果却是不如意&#x…

Linux系统部署Python语言开发运行环境

目录 Ubuntu自带python Debian安装python 安装 pip 库列表 安装第三方库 使用国内镜像站 实装 tkinter 库 编写运行代码 测试代码1 1. 创建项目 2. 创建源码文件 3. 写入源代码 4. 修改权限 5. 运行代码 测试代码2 本文的使用环境是Windows的Linux 子系统&…

ChatGPT: 人机交互的未来

ChatGPT: 人机交互的未来 ChatGPT背景ChatGPT的特点ChatGPT的应用场景结论 ChatGPT ChatGPT是一种基于大数据和机器学习的人工智能聊天机器人模型。它由国内团队发明、开发&#xff0c;并被命名为Mental AI。ChatGPT的目标是通过模拟自然对话的方式&#xff0c;提供高效、智能…

Go学习第六天

Golang变量内置pair结构详细说明 变量包括&#xff08;type, value&#xff09;两部分type 包括 static type和concrete type. 简单来说 static type是你在编码是看见的类型(如int、string)&#xff0c;concrete type是runtime系统看见的类型类型断言能否成功&#xff0c;取决…

原型模式(C++)

定义 使用原型实例指定创建对象的种类&#xff0c;然后通过拷贝这些原型来创建新的对象。 应用场景 在软件系统中&#xff0c;经常面临着“某些结构复杂的对象”的创建工作;由于需求的变化&#xff0c;这些对象经常面临着剧烈的变化&#xff0c;但是它们却拥有比较稳定一致的…

Linux磁盘管理

磁盘管理 基本分区管理 磁盘划分思路 进入分区表&#xff0c;新建分区更新分区表格式化分区表挂载使用 #lsblk #df -h 查看设备挂载情况 #fdisk -l 设备分区情况 #fdisk /dev/sdb 添加一块硬盘&#xff0c;需要将其分两个分区&#xff0c;分别格式化成ext4和vfat格式文件系…

TechTool Pro for mac(硬件监测和系统维护工具)

TechTool Pro 是为 Mac OS X 重新设计的全新工具程序&#xff0c;不但保留旧版原有的硬件侦测功能&#xff0c;还可检查系统上其他重要功能&#xff0c;如&#xff1a;网络连接&#xff0c;区域网络等。 TechTool Pro for mac随时监控和保护您的电脑&#xff0c;并可预设定期检…

最新SecureCRT 中文注册版

SecureCRT是一款由VanDyke Software公司开发的终端仿真软件&#xff0c;它提供了类似于Telnet和SSH等协议的远程访问功能。SecureCRT专门为网络管理员、系统管理员和其他需要保密访问网络设备的用户设计。 软件下载&#xff1a;SecureCRT for ma注册版 远程访问&#xff1a;Sec…

MySQL 与MongoDB区别

一、什么是MongoDB呢 ? MongoDB 是由C语言编写的&#xff0c;是一个基于分布式文件存储的开源数据库系统。在高负载的情况下&#xff0c;添加更多的节点&#xff0c;可以保证服务器性能。 MongoDB 旨在为WEB应用提供可扩展的高性能数据存储解决方案。 MongoDB 将数据存储为一…

【PHP代码审计】ctfshow web入门 php特性 93-104

ctfshow web入门 php特性 93-104 web 93web 94web 95web 96web 97web 98web 99web 100web 101web 102web 103web 104 web 93 这段PHP代码是一个简单的源码审计例子&#xff0c;让我们逐步分析它&#xff1a; include("flag.php");: 这行代码将flag.php文件包含进来。…

如何建立含有逻辑删除字段的唯一索引

业务场景 在实际工作当中&#xff0c;遇到一个场景&#xff0c;就是在用户注册时&#xff0c;名字要全局唯一&#xff0c;当然&#xff0c;我们是可以对用户进行删除的&#xff0c;你会怎么去做&#xff1f; 分析 一般来说&#xff0c;我们可以在用户注册请求时&#xff0c…

习题1.27

先写代码 (defn square [x] (* x x)) (defn expmod[base exp m](cond ( exp 0) 1(even? exp) (mod (square (expmod base (/ exp 2) m)) m):else (mod (* base (expmod base (- exp 1) m)) m)))(defn fermat-test[n](defn try-it [a](cond ( a n) (println "test end&qu…

极狐GitLab 全新「价值流仪表盘」使用指南

本文来源&#xff1a;about.gitlab.com 作者&#xff1a;Haim Snir 译者&#xff1a;极狐(GitLab) 市场部内容团队 GitLab / 极狐GitLab 价值流仪表盘的使用相对简单&#xff0c;这种可以定制化的仪表盘能够让决策者识别数字化转型进程中的趋势及机遇。 如果你已经在用 GitLab…

Android学习之路(1) App工程的项目结构

一、App工程的项目结构 1.项目下面有两个分类 一个是app(代表app模块)&#xff0c;另一个是Gradle Scripts。其中app下面又有3个子目录&#xff0c;其功能说明如下&#xff1a; manifests 子目录下面只有一个XML文件&#xff0c;即AndroidManifest.xmljava子目录&#xff0c;…

谈谈量子计算技术

目录 1.什么是量子计算 2.量子计算的应用领域 3.量子计算对现代科学的影响 4.量子计算未来的发展趋势 1.什么是量子计算 量子计算是一种基于量子力学原理的计算方法&#xff0c;利用量子比特&#xff08;Quantum Bit&#xff0c;简称qubit&#xff09;而不是经典计算中的比特…

shell 脚本

一、使用PID过滤该进程的所有信息 #! /bin/bash # Function: 根据用户输入的PID&#xff0c;过滤出该PID所有的信息 read -p "请输入要查询的PID: " P nps -aux| awk $2~/^$P$/{print $11}|wc -l if [ $n -eq 0 ];thenecho "该PID不存在&#xff01;&#xff0…

MobPush Android SDK 厂商推送限制

概述 厂商推送限制 每个厂商通道都有对应的厂商配额和 QPS 限制&#xff0c;当请求超过限制且已配置厂商回执时&#xff0c;MobPush会采取以下措施&#xff1a; 当开发者推送请求超过厂商配额时&#xff0c;MobPush将通过自有通道进行消息下发。当开发者推送请求超过厂商 QP…