vue解决跨域访问问题(个人学习笔记六)

目录

  • 友情提醒
  • 第一章、跨越问题解决
    • 1.1)什么是跨域问题?
    • 1.2)第一种解决方式:后端设置允许跨域访问
    • 1.3)第二种解决方式:前端配置代理
  • 第二章、配置代理服务器
    • 2.1)配置简单代理服务器
    • 2.2)多个代理配置

友情提醒

先看文章目录,大致了解知识点结构,直接点击文章目录可以跳转到文章指定位置。

第一章、跨越问题解决

1.1)什么是跨域问题?

vue单页应用项目开发时,避免不了要请求后端,这时通常就会出现跨域问题
浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都会导致跨域问题。即前端接口去调用不在同一个域内的后端服务器而产生的问题。

1.2)第一种解决方式:后端设置允许跨域访问

注意:但在生产环境下,为了安全起见,还是建议不要设置允许跨域访问,或者 限制允许跨域的IP
例如:SpringMVC允许跨域的设置
1.使用的方式用@Controller和@CrossOrgin一起使用,可以实现跨域!
只有Spring版本从4.2开始才有跨域支持!

//某个方法支持跨域访问:在方法上增加@CrossOrigin注解
@RequestMapping("/crossDomain2.action")
@ResponseBody
@CrossOrigin
public String crossDomain2(HttpServletRequest req, HttpServletResponse res, String name){return null;
}

整个Controller都支持跨域访问

//整个Controller都支持跨域访问,在类上面加上注解@CrossOrigin
@Controller
@CrossOrigin
public class TestController {}

2.使用定义全局的跨域配置:可以通过实现WebMvcConfigurer并重写 addCorsMappings方法来实现跨域
3.使用过滤器方式

public class HeaderFilter implements Filter{public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)throws IOException, ServletException {HttpServletRequest request = (HttpServletRequest)req;HttpServletResponse response = (HttpServletResponse) res;String originHeader = request.getHeader("Origin");response.setHeader("Access-Control-Allow-Origin", originHeader);response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");response.setHeader("Access-Control-Max-Age", "0");response.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,userId,token");response.setHeader("Access-Control-Allow-Credentials", "true");response.setHeader("XDomainRequestAllowed","1");response.setHeader("XDomainRequestAllowed","1");chain.doFilter(request, response);}
}

1.3)第二种解决方式:前端配置代理

代理服务器的主要思想是通过建立一个端口号和前端相同的代理服务器进行中转,从而解决跨域问题。因为代理服务器与前端处于同一个域中,不会产生跨域问题;而且代理服务器与服务器之间的通信是后端之间的通信,不会产生跨域问题。
原理:浏览器和服务器当:协议、ip、端口号有一个不一致,就是违背同源策略
找一个和浏览器同源的服务器,让这个服务器帮我们代理给别的服务器发请求服务器之间不必遵守同源策略

第二章、配置代理服务器

vue-cli配置代理的两种方法:都要编写vue.config.js
在这里插入图片描述

2.1)配置简单代理服务器

①优点:配置简单,请求资源时直接发给前端(8080)即可
②缺点:不能配置多个代理,不能灵活的控制请求是否走代理
③工作方式:若按照上述配置代理,当请求了不存在的资源时,那么该请求就 会转发给服务器(有限匹配前端资源)

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,//对使用的JS 语法进行转译  不同版本使用不同// 开启代理服务器,注意:这里的端口号写后端的端口号(方式一)//简单代理服务器devServer:{port:8080,//当前前端服务器的端口号  不写默认是8080proxy:"http://127.0.0.1:8081"//代理服务器}
})

在这里插入图片描述

2.2)多个代理配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,//对使用的JS 语法进行转译  不同版本使用不同// 开启代理服务器,注意:这里的端口号写后端的端口号(方式一)/*//简单代理服务器devServer:{port:8080,//当前前端服务器的端口号  不写默认是8080proxy:"http://127.0.0.1:8081"//代理服务器}*//*配置多个代理*/devServer:{port:9527,//前端服务器端口号变成9527proxy:{//配置多个代理服务器格式:/*"/代理服务器的名字":{target:"代理服务器的地址",ws:true,//用于支持websocketchangeOrigin: true,// 用于控制请求头中的host值  代理欺骗 可以不写pathRewrite: {'^/代理服务器名字': ''} //重写路径,把所有路径中包含/代理服务器名的路径替换为空字符串}*/"/myFirstProxy":{target:"http://127.0.0.1:8081", //代理服务器的地址ws:true,//用于支持websocket//就是把/myFirstProxy变成了空字符串pathRewrite:{"^/myFirstProxy":""}//重写路径,把所有路径中包含/代理服务器名的路径替换为空字符串},"/mySecondProxy":{target:"http://127.0.0.1:8082", //代理服务器的地址ws:true,//用于支持websocketpathRewrite:{"^/mySecondProxy":""}}}}
})

发起请求:

<template><div><h1>欢迎访问员工管理页面</h1><button @click="sendRequestDemo()">访问后台服务器</button><button @click="sendRequestDemo2()">访问后台服务器使用多代理方式</button></div>
</template><script>import axios from "axios"export default {name: "EmpDemo",methods:{sendRequestDemo2(){//使用多代理服务器   根据代理服务器的名字 找具体的代理服务器发起代理请求axios({method:"get",//http://127.0.0.1:8081/vueweb001/demo1/methodDemo.actionurl:"http://localhost:9527/myFirstProxy/vueweb001/demo1/methodDemo1.action"}).then(function(result){alert(result.data)console.log("myFirstProxy接收到的值:",result.data)});},sendRequestDemo(){//配置简单代理服务器 发起异步请求 访问后台服务器axios({method:"get",配置简单代理服务器 请求资源时直接发给前端(8080)即可//我们把请求发给前端服务器再由代理服务器帮我们转发到 8081服务器url:"http://localhost:8080/vueweb001/demo1/methodDemo1.action"}).then(function(result){alert(result.data)console.log(result.data)});}}}
</script>
<style scoped>
</style>

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

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

相关文章

es6 new Set 数组去重 并集 交集 差集

Set 对象存储的值总是唯一的 Set 对象方法 方法 描述 add 添加某个值&#xff0c;返回Set对象本身。 clear 删除所有的键/值对&#xff0c;没有返回值。 delete 删除某个键&#xff0c;返回true。如果删除失败&#xff0c;返回false。 forEach 对每个元素执行指定操作。 has 返…

端口复用与重映射

端口复用和重映射 STM32F1有很多的内置外设&#xff0c;这些外设的外部引脚都是与GPIO复用的。也就是说&#xff0c;一个GPIO如果可以复用为内置外设的功能引脚&#xff0c;那么当这个GPIO作为内置外设使用的时候&#xff0c;就叫做复用。 大家都知道&#xff0c;MCU都有串口…

kotlin 编写一个简单的天气预报app(一)

使用Android Studio开发天气预报APP 今天我来分享一下如何使用Android Studio开发一个天气预报APP。在文中&#xff0c;我们将使用第三方接口获取实时天气数据&#xff0c;并显示在APP界面上。 步骤一&#xff1a;创建新项目 首先&#xff0c;打开Android Studio并创建一个新…

MySQL 中一条 SQL 的查询与更新

MySQL 中一条 SQL 的查询与更新 1 SQL 的查询1.1 MySQL 的逻辑架构图1.2 连接器1.3 查询缓存1.4 分析器1.5 优化器1.6 执行器 2 SQL 的更新2.1 redo log&#xff08;重做日志&#xff09;2.2 binlog&#xff08;归档日志&#xff09;2.3 redo log 和 binlog 日志的差异2.4 示例…

Yarn上Streaming流自动调节资源设计

Streaming流自动调节资源 自动资源调节简单来说就是根据数据的输入速率和数据的消费速率来判断是否应该调节资源。如果输入速率大于消费速率&#xff0c;并且在输入速率还在攀升&#xff0c;则将该Job停止并调高Job的资源等级然后重启。如果消费速率大于输入速率&#xff0c;并…

React的核心概念—组件

参考文章 组件的定义和使用 组件是 React 的核心概念之一。它们是构建用户界面&#xff08;UI&#xff09;的基础。 组件&#xff1a;UI 构成要素 在 Web 当中&#xff0c;HTML 允许使用其内置的标签集&#xff08;如 <h1> 和 <li>&#xff09;创建丰富的结构化…

Qt - 控件和布局

文章目录 添加按钮 QPushButton自定义控件对象树坐标系 https://www.bilibili.com/video/BV1g4411H78N?p6 添加按钮 QPushButton 添加控件到窗口&#xff0c;需要添加内容到 mywidget.cpp #include "mywidget.h" #include <QPushButton> //按钮控件的头文件…

React 中 {} 的应用

列表渲染&#xff1a; 1.使用数组的 map 方法&#xff08;因为map 可以映射&#xff09; 2、列表要添加 key 属性&#xff0c;值要唯一 // 导入 // 用来获取 dom元素 import { createRoot } from "react-dom/client";// 内容 const contentArr [{ id: 1, name: &…

提高公文写作效率,可以采用模板和样例来辅助写作

采用模板和样例是提高公文写作效率的一种常见方法。 模板是指已经制作好的公文格式和结构模板&#xff0c;可以根据模板来组织和排版自己的文章&#xff0c;以减少排版时间和排版错误。常见的模板包括各类公文格式&#xff0c;例如通知、报告、请示等等。在使用模板的过程中&am…

java后端校验

Java 后端数据校验 一、概述 当我们想提供可靠的 API 接口&#xff0c;对参数的校验&#xff0c;以保证最终数据入库的正确性&#xff0c;是 必不可少 的活。比如下图就是 我们一个项目里 新增一个菜单校验 参数的函数&#xff0c;写了一大堆的 if else 进行校验&#xff0c;…

GPT4ALL私有化部署 01 | Python环境

进入以下链接&#xff1a; https://www.python.org/downloads/release/python-3100/ 滑动到底部 选择你系统对应的版本&#xff0c;如果你是win&#xff0c;那么大概率是win-64bit 有可能你会因为网络的问题导致下载不了&#xff0c;我提供了 链接 接着只需要打开 等待…

单例模式与构造器模式

单例模式 1、是什么 单例模式&#xff08;Singleton Pattern&#xff09;&#xff1a;创建型模式&#xff0c;提供了一种创建对象的最佳方式&#xff0c;这种模式涉及到一个单一的类&#xff0c;该类负责创建自己的对象&#xff0c;同时确保只有单个对象被创建 在应用程序运…

Mac 快速生成树形项目结构目录

我这里使用的是通过包管理 Homebrew安装形式。没有安装的话可以自行搜索 Homebrew 安装方式 brew install tree直接到项目的根目录执行 tree 命令 tree 效果如下&#xff1a; or &#xff1a; tree -CfL 3效果如下&#xff1a;

opencv-24 图像几何变换03-仿射-cv2.warpAffine()

什么是仿射&#xff1f; 仿射变换是指图像可以通过一系列的几何变换来实现平移、旋转等多种操作。该变换能够 保持图像的平直性和平行性。平直性是指图像经过仿射变换后&#xff0c;直线仍然是直线&#xff1b;平行性是指 图像在完成仿射变换后&#xff0c;平行线仍然是平行线。…

基于LNMP配置WordPress建站时出现的问题汇总

这里写目录标题 wordpress上传文件报错问题描述原因分析&#xff1a;解决方案&#xff1a; wordpress裁剪图片报错问题描述原因分析&#xff1a;解决方案&#xff1a; wordpress上传文件报错 WP内部错误&#xff0c;在上传文件时发生了错误&#xff0c;显示权限不足无法保存 …

SQL注入--题目

联合查询注入&#xff1a; bugku-这是一个神奇的登录框 手工注入&#xff1a; 点吧&#xff0c;输入0’发现还是&#xff1a; 输入0" 发现报错&#xff1a; 确定可以注入&#xff0c;判断字段有多少个 0"order by 1,2,3# 发现&#xff1a; 说明有两列。 输入 0&qu…

Docker系列---【docker和docker容器设置开机启动】

docker和docker容器设置开机启动 1、设置docker开机启动 systemctl enable docker 2、设置容器自动重启 1)创建容器时设置 docker run -d --restartalways --name 设置容器名 使用的镜像 (上面命令 --name后面两个参数根据实际情况自行修改)# Docker 容器的重启策略如下&#…

【论文阅读22】Label prompt for multi-label text classification

论文相关 论文标题&#xff1a;Label prompt for multi-label text classification&#xff08;基于提示学习的多标签文本分类&#xff09; 发表时间&#xff1a;2023 领域&#xff1a;多标签文本分类 发表期刊&#xff1a;Applied Intelligence&#xff08;SCI二区&#xff0…

Linux 常用命令全拼

pwd&#xff1a;print work directoryps&#xff1a;process statusdf&#xff1a;disk freedu&#xff1a;disk usagecat&#xff1a;concatenate 连锁&#xff0c;连接insmod&#xff1a;install module 载入模块ln -s&#xff1a;link -soft 创建一个软链接&#xff0c;相当…