【Vue面试题二十九】、Vue项目中你是如何解决跨域的呢?

文章底部有个人公众号:热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享? 踩过的坑没必要让别人在再踩,自己复盘也能加深记忆。利己利人、所谓双赢。

面试官:Vue项目中你是如何解决跨域的呢?
在这里插入图片描述

一、跨域是什么

跨域本质是浏览器基于同源策略的一种安全手段

同源策略(Sameoriginpolicy),是一种约定,它是浏览器最核心也最基本的安全功能

所谓同源(即指在同一个域)具有以下三个相同点

  • 协议相同(protocol)
  • 主机相同(host)
  • 端口相同(port)

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

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

二、如何解决

解决跨域的方法有很多,下面列举了三种:

  • JSONP
  • CORS
  • Proxy

而在vue项目中,我们主要针对CORSProxy这两种方案进行展开

CORS
CORSCross-Origin Resource Sharing,跨域资源共享)是一个系统,它由一系列传输的HTTP头组成,这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应

CORS 实现起来非常方便,只需要增加一些 HTTP 头,让服务器能声明允许的访问来源

只要后端实现了 CORS,就实现了跨域

在这里插入图片描述
koa框架举例

添加中间件,直接设置Access-Control-Allow-Origin响应头

app.use(async (ctx, next)=> {ctx.set('Access-Control-Allow-Origin', '*');ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');if (ctx.method == 'OPTIONS') {ctx.body = 200; } else {await next();}
})

ps: Access-Control-Allow-Origin 设置为*其实意义不大,可以说是形同虚设,实际应用中,上线前我们会将Access-Control-Allow-Origin 值设为我们目标host

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

方案一

如果是通过vue-cli脚手架工具搭建项目,我们可以通过webpack为我们起一个本地服务器作为请求的代理对象

通过该服务器转发请求至目标服务器,得到结果再转发给前端,但是最终发布上线时如果web应用和接口服务器不在一起仍会跨域

vue.config.js文件,新增以下代码

amodule.exports = {devServer: {host: '127.0.0.1',port: 8084,open: true,// vue项目启动时自动打开浏览器proxy: {'/api': { // '/api'是代理标识,用于告诉node,url前面是/api的就是使用代理的target: "http://xxx.xxx.xx.xx:8080", //目标地址,一般是指后台服务器地址changeOrigin: true, //是否跨域pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替'^/api': "" }}}}
}

通过axios发送请求中,配置请求的根路径

axios.defaults.baseURL = '/api'

方案二

此外,还可通过服务端实现代理请求转发

express框架为例

var express = require('express');
const proxy = require('http-proxy-middleware')
const app = express()
app.use(express.static(__dirname + '/'))
app.use('/api', proxy({ target: 'http://localhost:4000', changeOrigin: false}));
module.exports = app

方案三

通过配置nginx实现代理

server {listen    80;# server_name www.josephxia.com;location / {root  /var/www/html;index  index.html index.htm;try_files $uri $uri/ /index.html;}location /api {proxy_pass  http://127.0.0.1:3000;proxy_redirect   off;proxy_set_header  Host       $host;proxy_set_header  X-Real-IP     $remote_addr;proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;}
}

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

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

相关文章

C# OpenVINO 通用OCR识别 文字识别 中文识别 服务

软件说明 基于以下开源项目,做了再次封装 https://github.com/sdcb/OpenVINO.NET 自带模型,可离线部署; 技术路线:VS2022Sdcb.OpenVINOSdcb.OpenVINO.PaddleOCROpenCvSharpNLogNancy.Hosting.Self 软件界面 开启服务 测试 耗时…

二、K8S之Pods

Pod 一、概念 K8S作为一个容器编排管理工具,它可以自动化容器部署、容器扩展、容器负载均衡等任务,并提供容器的自愈能力等功能。在Kubernetes中,Pod是最基本的调度单元,它是一组共享存储和网络资源的容器集合,通常是…

计算机毕业设计-开题报告答辩常见问题!Javaweb项目答辩

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点…

快速学习MyBatisPlus

文章目录 前言一、条件构造器和常用接口1.wapper介绍2.QueryWrapper(1)组装查询条件(2)组装排序查询(3)组装删除查询(4)条件优先级(5)组装select子句&#xf…

如何使用摩尔信使MThings连接网络设备

帽子: 摩尔信使MThings支持Modbus-TCP、Modbus-RTU Over TCP、Modbus-TCP Over UDP、Modbus-RTU Over UDP。 TCP链接中,摩尔信使MThings支持灵活的连接方式,主机可作为客户端也可以作为服务端,同时支持模拟从机以客户端方式向远…

283 移动零

解题思路: \qquad 适用双指针,l:最左边‘0’元素坐标;r:l右边第一个非零元素坐标。 \qquad 最初的思路:将l和r初始化为0,遍历数组nums若任意一个指针到达数组末尾时停止。若当前nums[l] 0则移…

Leetcode——数组的改变、移动练习

453. 最小操作次数使数组元素相等 本人答案超时 class Solution { public:int minMoves(vector<int>& nums) {int len nums.size();int count 0;if (len 1) {count 0;}else {while (nums[0] ! nums[1] || nums[len - 2] ! nums[len - 1]) {for (int i 0; i <…

【QT】Ubuntu 交叉编译安装 QT 5.12.7 源码

目录 1、下载 QT 源码包 2、搭建安装环境(下载依赖库) 3、创建QT源码编译脚本 4、运行编译脚本 1、下载 QT 源码包 QT5.12.7源码下载地址: download | QT 5.12.7 选择任意一种下载即可&#xff0c;适用于 Windows 和 Linux 环境 这里选择的是.tar.xz 类型&#xff0c;上…

联邦学习综述三

A Survey on Federated Learning Systems Vision Hype and Reality for Data Privacy and Protection 选自&#xff1a;IEEE Transactions on Knowledge and Data Engineering&#xff0c;2021 链接 本文主要从数据分布、机器学习模型、隐私机制、通信架构、联邦规模和联邦动…

Elasticsearch实现检索词自动补全(检索词补全,自动纠错,拼音补全,繁简转换) 包含demo

Elasticsearch实现检索词自动补全 自动补全定义映射字段建立索引测试自动补全 自动纠错查询语句查询结果 拼音补全与繁简转换安装 elasticsearch-analysis-pinyin 插件定义索引与映射建立拼音自动补全索引测试拼音自动补全测试繁简转换自动补全 代码实现demo结构demo获取 自动补…

mongoDB 性能优化

文章目录 前言mongoDB 性能优化1. explain方法来查看查询的执行计划2. 查看mongoDB 集合的索引3. mongoDB 怎么添加索引4. 升序索引与降序索引是什么意思 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易…

java_Stream API

文章目录 一、Stream API vs 集合二、Stream 使用的执行流程2.1、创建Stream2.1、中间操作2.1.1. filter2.1.2. limit2.1.3. skip2.1.4. distinct2.1.5. map2.1.6. sorted 一、Stream API vs 集合 Stream API 关注的是多个数据的计算&#xff08;排序、查找、过滤、映射、遍历…

服务器感染了.360、.halo勒索病毒,如何确保数据文件完整恢复?

导言&#xff1a; 数据的安全性至关重要&#xff0c;但威胁不断进化&#xff0c;.360、.halo勒索病毒是其中的令人担忧的勒索软件。本文91数据恢复将深入介绍.360、.halo勒索病毒&#xff0c;包括其威胁本质、数据恢复方法和如何采取预防措施来保护您的数据。 如果受感染的数据…

【Vue面试题二十七】、你了解axios的原理吗?有看过它的源码吗?

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;说下你的vue项目的目录结…

基于html5开发的Win12网页版,抢先体验

据 MSPoweruser 报道&#xff0c;Windows 11虽然刚刚开始步入正轨&#xff0c;但最新爆料称微软已经在开启下一个计划&#xff0c;Windows 12 的开发将在 去年3 月份开始。德国科技网站 Deskmodder.de 称&#xff0c;根据内部消息&#xff0c;微软将在 2022年3 月开始开发 Wind…

1、验证1101序列(Moore)

题目要求&#xff1a; 用Moore型状态机验证1101序列。 题目描述&#xff1a; 用使用状态机验证1101序列&#xff0c;注意&#xff1a;允许重复子序列。如图 端口描述&#xff1a; module moore_1101(input clk,//时钟信号input clr,//reset复位信号&#xff0c;高电平有效in…

pdf处理工具 Enfocus PitStop Pro 2022 中文 for mac

Enfocus PitStop Pro 2022是一款专业的PDF预检和编辑软件&#xff0c;旨在帮助用户提高生产效率、确保印刷品质量并减少错误。以下是该软件的一些特色功能&#xff1a; PDF预检。PitStop Pro可以自动检测和修复常见的PDF文件问题&#xff0c;如缺失字体、图像分辨率低、颜色空…

在Android平板上使用code-server公网远程Ubuntu服务器编程

文章目录 1.ubuntu本地安装code-server2. 安装cpolar内网穿透3. 创建隧道映射本地端口4. 安卓平板测试访问5.固定域名公网地址6.结语 1.ubuntu本地安装code-server 准备一台虚拟机,Ubuntu或者centos都可以&#xff0c;这里以VMwhere ubuntu系统为例 下载code server服务,浏览器…

​EtherNet/IP 库卡机器人和EtherCAT倍福PLC总线协议连接案例​

EtherNet/IP 是一种适合于工业环境和对时间要求比较苛刻的应用的网络。而远创智控YC-EIPM-ECT通讯网关&#xff0c;是一款自主研发的EtherNet/IP 从站功能的通讯网关。它不仅可以实现EtherNet/IP 和EtherCAT的无缝连接&#xff0c;还可以将EtherNet/IP 作为从站连接到EtherCAT总…

嵌入式数据库sqlite3【基础篇】基本命令操作,小白一看就懂(C/C++)

目录 前言 一、sqlite概念和特性 二、sqlite安装 三、sqlite3数据类型 四、sqlite数据库约束 五、sqlite常用命令 六、SQL语句&#xff08;增删改查&#xff09; 七、sqlite使用实例&#xff08;教学管理数据库&#xff09; 总结 前言 数据在实际工作中应用非常广泛…