No ‘Access-Control-Allow-Origin‘ header is present on the requested resource关于vue跨域问题

ops/2024/10/18 10:20:49/

        浏览器为了安全考虑,有一个最基本的安全策略,即同源策略。

        同源策略规定:浏览器在解析Ajax请求时,要求浏览器的路径与Ajax的请求的路径必须满足三个要求,即请求的协议、域名、端口号都相同,满足同源策略,可以访问服务器,否则,只要有一个不相同,那么都是非同源。

        跨域问题的出现是因为浏览器的同源策略问题,所谓同源:就是两个页面具有相同的协议(protocol),主机(host)和端口号(port),它是浏览器最核心也是最基本的功能,如果没有同源策略我们的浏览器将会十分的不安全,随时都可能受到攻击。

当我们请求一个接口的时候,出现如:Access-Control-Allow-Origin 字眼的时候说明请求跨域了

 问题一:所有使用JavaScript的浏览器都会支持同源策略。同源策略即指域名/协议/端口号相同。只要有一个不同,就会当作跨域请求

一是可以让后端接口或配置文件里添加跨域代码

java">header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
//或者过滤器中添加
httpResponse.setHeader("Access-Control-Allow-Origin","*");
httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
httpResponse.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");

二是可以前端设置代理

找到config文件夹下的index.js文件,然后找到dev下的proxyTable{}

java"> proxy: {
"/test": {target: "http://www.baidu.com/",   //这里设置需要请求的接口地址changeOrigin: true}
}

然后找到请求页面,在axios的请求接口里面只写/test/getlist就行了。/test/跟上接口地址

或者是另一种配置: 同样是更改config/index.js的配置文件

javascript>javascript">module.exports = {dev: {proxyTable: {'/test/: {target: 'http://www.baidu.com/',changeOrigin: true,pathRewrire: {'^/test': ''}}}}

遇到接口路径有test的,就换成http://www.baidu.com/这个请求头,同时把test去掉

或者是其他版本时: 在项目根目录下新建vue.config.js文件,在该文件内新增配置

java">module.exports = {devServer: {proxy: {'/test': {target: 'https://baidu.com',ws: true,changeOrigin: true,pathRewrite: {'^/test': ''}}}},
}

我这里的配置是这样的:

 然后地址是配置到了这边

 这样打包的时候就会把值带过去

问题二:

重复Access-Control-Allow-Origin

java"> HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;//*表示允许所有域名跨域httpResponse.setHeader("Access-Control-Allow-Origin","*");httpResponse.setHeader("Access-Control-Allow-Credentials", "true");httpResponse.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");httpResponse.setHeader("Access-Control-Max-Age", "5000");httpResponse.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,Authorization,Token");filterChain.doFilter(servletRequest, servletResponse);

前端访问后端时出现了跨域问题,在返回的请求头中出现了俩次Access-Control-Allow-Origin:"*",导致请求跨域,原因是因为配置了两次跨域。一次是在FileUtil中配置了response.addHeader("Access-Control-Allow-Origin", "*"),另外一次是使用CorsFilter又配置了一次,所以才出现了出现有两个Access-Control-Allow-Origin问题,所以只需要把其中一个配置删除就可以解决了。就是过滤器中或配置文件或者其他设置中配置了跨域才会出现的问题。

问题三:后端接收到的类型不一致。

我这边是传值的时间出了问题,后端需要的时间类型是:2022-12-06 00:00:00,而前端传值是2022-12-06,所以然后也报了跨域问题:No 'Access-Control-Allow-Origin' header is present on the requested resource,把前后端需要的属性的类型都统一就解决了。

 


http://www.ppmy.cn/ops/20803.html

相关文章

IntelliJ IDEA 如何启用 JDK 预览特性

IntelliJ IDEA 也可以启用 JDK 的预览特性。 针对项目,选择项目结构。 配置是在语言结构上。 单击语言结构上的 SDK 默认,往下拉,就可以看到针对新版本的选项。 同时还可以看到那些版本是支持新特性预览的,那些版本是不支持新特…

使用Python实现语音识别与处理模型

语音识别与处理是一项重要的人工智能技术,它可以将人类语音转换成文本形式,从而实现语音命令识别、语音转写等功能。在本文中,我们将介绍语音识别与处理的基本原理和常见的实现方法,并使用Python来实现这些模型。 什么是语音识别…

1.pytorch加载收数据(B站小土堆)

数据的加载主要有两个函数: 1.dataset整体收集数据:提供一种方法去获取数据及其label,告诉我们一共有多少数据(就是自开始把要的数据和标签都收进来) 2.dataloader,后面传入模型时候,每次录入数…

MultiHeadAttention在Tensorflow中的实现原理

前言 通过这篇文章,你可以学习到Tensorflow实现MultiHeadAttention的底层原理。 一、MultiHeadAttention的本质内涵 1.Self_Atention机制 MultiHeadAttention是Self_Atention的多头堆嵌,有必要对Self_Atention机制进行一次深入浅出的理解,这…

数学与机器学习:共舞于智能时代的双璧

随着人工智能的崛起,机器学习作为其核心技术之一,正引领着新一轮的科技革命。而在这场革命中,数学以其深邃的理论和精妙的工具,为机器学习提供了坚实的支撑。数学与机器学习之间的关系,如同琴瑟和鸣,共同编…

友盟+|如何通过阿里云Flink+Paimon实现流式湖仓落地方案

1. 友盟介绍 友盟 以“数据智能,驱动业务增长”为使命,为移动应用开发者和企业提供包括统计分析、性能监测、消息推送、智能认证等一站式解决方案。截止 2023 年 6 月,已累计为 270 万移动应用和 980 万家网站,提供十余年的专业数…

JavaEE——介绍 HTTPServlet 三部分使用与 cookie 和 session 的阐述

文章目录 一、HTTPServlet介绍其中的关键 三个方法 二、HTTPServletRequest(处理请求)1.分块介绍方法作用get 为前缀的方法字段中 含有 getParameter 字段 的方法(前后端交互):字段中 含有 getHeader 字段 的方法: 2.解释前后端的交互过程3.使用 json 格…

Open sesame! universal black box jailbreaking of large language models - 论文翻译

论文链接: https://arxiv.org/pdf/2309.01446.pdf Open sesame! universal black box jailbreaking of large language models Abstract1 Introduction2 Previous Work3 Threat Model4 Our Method4.1 Genetic Algorithm4.2 Population Encoding4.3 Fitness4.4 Sele…