前后端跨域问题解决

前后端跨域问题解决

一、前端解决跨域问题
找到以下文件
在这里插入图片描述
编写以下代码

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,devServer: {//是否自动打开浏览器open: true,//修改默认8080端口号port: 8087,//跨域,设置后端接口入口地址,"/"为代理地址必须有,为后端地址192.168.99.54,7676服务端口号// proxy: {//   '/':{//     target: 'http://localhost:8088',//     changeOrigin: true,//     ws: false//   }// }},})

如图
在这里插入图片描述
二、后端结局跨域问题


import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@SpringBootConfiguration
public class MyWebConfigurer implements WebMvcConfigurer {/*** 所有请求都允许跨域,使用这种配置就不需要在interceptor中配置header了*/@Overridepublic void addCorsMappings(CorsRegistry corsRegistry){corsRegistry.addMapping("/**").allowCredentials(true).allowedOrigins("http://前端IP:端口号").allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE").allowedHeaders("*").maxAge(3600);}
}

2、在controller类或者下面的方法上加上@CrossOrigin注解


import java.util.List;@RestController
@CrossOrigin
public class VisitController {@PostMapping("/jntm")public List<CXK> register(@RequestBody CXK  cxk){return null;
}
import java.util.List;@RestController
public class VisitController {@CrossOrigin@PostMapping("/jntm")public List<CXK> register(@RequestBody CXK  cxk){return null;
}

三、过滤器解决跨域问题

package com.kk.filter;import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.stereotype.Component;import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;// 跨域过滤器
@Component
public class CrosFilter implements Filter {@Overridepublic void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {HttpServletRequest request = (HttpServletRequest) req;HttpServletResponse response = (HttpServletResponse) res;String curOrigin = request.getHeader("Origin");// 设置响应头//该字段是必须的。它的值要么是请求时Origin字段的值,要么是一个*,表示接收任意域名的请求。response.setHeader("Access-Control-Allow-Origin", "*");//该字段是必须的,用来列出浏览器的CORS请求会用到哪些HTTP方法response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");//预检间隔时间response.setHeader("Access-Control-Max-Age", "3600");//该字段是一个逗号分隔的字符串,指定浏览器CORS请求会额外发送的头信息字段response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,token,customercoderoute,authorization,conntectionid,Cookie,request-ajax");//Access-Control-Allow-Credentials:该字段可选。它的值是一个布尔值,表示是否允许发送Cookie。// 默认情况下,Cookie不包括在CORS请求之中,设为True,// 即表示服务器明确许可,Cookie可以包含在请求中,一起发送给服务器。// 这个值也只能设为True,如果服务器不要浏览器发送Cookie,删除即可// Access-Control-Allow-Credentials为True的时候,Access-Control-Allow-Origin一定不能设置为“*”,否则报错response.setHeader("Access-Control-Allow-Credentials","true");// 浏览器默认会发起异常 OPTIONS 的请求方式 这个时候我们通过过滤器直接拦截返回200后就可以解决跨越问题if ("OPTIONS".equals(request.getMethod())) {response.setStatus(HttpServletResponse.SC_OK);return;}chain.doFilter(request, response);}@Overridepublic void init(FilterConfig filterConfig) {}@Overridepublic void destroy() {}
}

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

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

相关文章

whale-quant 学习 part1:投资与量化投资

投资与量化投资 什么是投资投资的分类金融投资个人投资者投资品种投资-投机 常见的股票投资分析流派什么是量化投资量化投资的优势量化投资的主要风险 量化投资的历史发展**量化投资的一般流程常见量化投资平台参考 什么是投资 从经济学的广泛意义上讲&#xff0c;投资是为了获…

Win10下在Qt项目中配置SQlite3环境

资源下载 官网资源&#xff1a;SQLite Download Page 1、sqlite.h sqlite-amalgamation-3450000.zip (2.60 MiB) 2、sqlite3.def&#xff0c;sqlite3.dll sqlite-dll-win-x64-3450000.zip (1.25 MiB) 3、 win10下安装sqlite3所需要文件 sqlite-tools-win-x64-3450000.zipht…

【单片机】改写DS2431芯片的地址码,地址ROM,DS2431芯片解密

对DS2431里面的128字节可以进行任意读写&#xff0c;方式可以看这里&#xff1a;https://blog.csdn.net/x1131230123/article/details/132248958 但DS2431芯片的地址码是光刻不可修改的&#xff0c;所以只有使用模拟芯片。 原理&#xff1a; https://www.dianyuan.com/article…

el-date-picker默认结束为当前时分秒

在element ui中的日期时间选择组件中默认是00:00,现在需求是点击默认结束时间为当前时分秒&#xff0c;查了很多资料写的都不准确 需求&#xff1a;实现日期时间组件可选择当前日期&#xff0c;比如当前是2024年01月17号下午17&#xff1a;21 那选中时必须结束时间为17&#x…

20230117-yolov5训练环境搭建

文章目录 1.参考资料2.服务器环境3.安装过程4.问题与解决5.补充6.其它技巧 1.参考资料 https://blog.csdn.net/qq_43573527/article/details/132963466 long错误解决方案 https://pytorch.org/get-started/previous-versions/ pytorch下载的位置 2.服务器环境 conda环境&…

Nsis打包Unity Exe文件(通用)

Nsi 脚本 !include "MUI2.nsh"#使用现代UI Unicode true #使用Unicode !define EXENAME "exeName" #定义常量 exe名称 !define SHORTCUT "快捷方式名称" #定义桌面快捷方式的中文名称Name ${EXENAME} #安装程序的title OutFile "${EXENAME…

uniapp开发小程序—scroll-view实现内容滚动时, 标题也滚动

一、需求 scroll-view实现内容滚动时&#xff0c; 标题也滚动 二、效果 三、代码实现 <template><view class"content"><view class"head">头部固定区域</view><view class"list_box"><!-- 菜单左边 -->&l…

对java的interface的理解

一个例子来让我们理解更加深刻 这是我们的整体文件布局 ①A是接口 ②B和C是用来实现接口的类 ③show是我们的运行函数&#xff0c;用来展示 A接口 接口中定义的方法可以不用去实现,用其他类去实现(必须实现) 关键字:interface public interface A { // public static …

threejs(18) - 地图模型加载

GeoJSON是什么 如果你接触过数据可视化&#xff0c;那么大概率会知道GeoJSON。不知道&#xff1f;没关系&#xff0c;本文将为您娓娓道来&#xff01; GeoJSON是一种对各种地理数据结构进行编码的格式&#xff0c;基于Javascript对象表示法的地理空间信息数据交换格式。 官网…

如何通过IDEA创建基于Java8的Spring Boot项目

上次发现我的IDEA创建Spring Boot项目时只支持11和17的JDK版本&#xff0c;于是就通过Maven搭建SpringBoot项目。 究其原因&#xff0c;原来是Spring官方抛弃了Java8&#xff01;&#xff01;&#xff01; 使用IDEA内置的Spring Initializr创建SpringBoot项目时&#xff0c;已…

Maven普通工程和web工程创建

文章目录 创建项目前设置maven工程前设置工作创建项目前--》设置utf-8配置maven参数Maven普通工程和web工程创建Maven简单工程第一步&#xff1a;File–New–Project 第二步&#xff1a;选择maven然后下一步&#xff1a;填写后询选择finish初始化maven工程目录简介maven简单工程…

day21-哈希表基础理论知识学习

day21-哈希表基础理论知识讲解 哈希表&#xff0c;也称为散列表&#xff08;Hash table&#xff09;&#xff0c;是一种用于存储和检索键值对的数据结构。它通过将键映射到数组中的特定位置来实现高效的数据访问。转自-代码随想录。 哈希表中关键码就是数组的索引下标&#x…