解决前后端跨域问题No‘Access-Control-Allow-Origin‘...
2024-05-13 19:37:48
实际工作中遇到了，在此做个笔记，希望能够帮助到遇到此问题的猿友们！！！
目录
问题场景
编辑此时作者后端代码为：
自定义过滤器：
WebMvcConfig配置文件： 注入自定义过滤器
解决方法
1.后端代码中设置解决跨域代码
2.使用Nginx进行解决跨域
3.设置Access-Control-Allow-Origin允许多域名访问
方式一：设置允许多域名访问最简单的方法是使用通配符。
方式二：使用数组过滤的方式
问题场景
前端访问后端接口从页面控制台Network中看到接口报错，请求方法为OPTIONS，状态值为302；
页面控制台中报错：No 'Access-Control-Allow-Origin' header is present on the requested resource
此时作者后端代码为：
自定义过滤器：
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;public class MyFilterConfig implements Filter {private Logger logger= LoggerFactory.getLogger(getClass());@Overridepublic void init(FilterConfig filterConfig) throws ServletException {logger.info("过滤器初始化");}@Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {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);}
}WebMvcConfig配置文件： 注入自定义过滤器
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;import java.util.Arrays;@Configuration
public class MvcConfig implements WebMvcConfigurer {@Value("${file.fileMapPath}")private String fileMapPath;/*** 自定义过滤器,解决前后端分离跨域问题* @return*/@Beanpublic FilterRegistrationBean myFilter(){FilterRegistrationBean filterRegistrationBean = new FilterRegistrationBean();//传入自己创建的filterfilterRegistrationBean.setFilter(new MyFilterConfig());//设置拦截路径filterRegistrationBean.setUrlPatterns(Arrays.asList("/*"));return filterRegistrationBean;}}解决方法
1.后端代码中设置解决跨域代码
方式一：
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;public class MyFilterConfig implements Filter {private Logger logger = LoggerFactory.getLogger(getClass());@Overridepublic void init(FilterConfig filterConfig) throws ServletException {logger.info("过滤器初始化");}@Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {HttpServletResponse response = (HttpServletResponse) servletResponse;HttpServletRequest request = (HttpServletRequest) servletRequest;//*表示允许所有域名跨域logger.info("进入过滤器");String origin = request.getHeader("Origin");response.setHeader("Access-Control-Allow-Origin", origin);response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");response.setHeader("Access-Control-Max-Age", "5000");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, Authorization, Token");response.setHeader("Access-Control-Allow-Credentials", "true");String method = request.getMethod();if (method.equalsIgnoreCase("OPTIONS")) {servletResponse.getOutputStream().write("Success".getBytes("utf-8"));} else {filterChain.doFilter(request, response);}}@Overridepublic void destroy() {}
}方式二：response.setHeader("Access-Control-Allow-Origin", "*");
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;public class MyFilterConfig implements Filter {private Logger logger = LoggerFactory.getLogger(getClass());@Overridepublic void init(FilterConfig filterConfig) throws ServletException {logger.info("过滤器初始化");}@Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {HttpServletResponse response = (HttpServletResponse) servletResponse;HttpServletRequest request = (HttpServletRequest) servletRequest;//*表示允许所有域名跨域logger.info("进入过滤器");response.setHeader("Access-Control-Allow-Origin", "*");response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");response.setHeader("Access-Control-Max-Age", "5000");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, Authorization, Token");response.setHeader("Access-Control-Allow-Credentials", "true");String method = request.getMethod();if (method.equalsIgnoreCase("OPTIONS")) {servletResponse.getOutputStream().write("Success".getBytes("utf-8"));} else {filterChain.doFilter(request, response);}}@Overridepublic void destroy() {}
}2.使用Nginx进行解决跨域
例：前端工程部署时使用浏览器默认端口：80 。后端工程端口为 8080 。nginx 监听端口 8082 。
前端请求后端 URL 为：http:// nginx所在服务器 IP : 8082 。
前端工程请求 8082，nginx 收到请求再转发到实际服务，取得数据，并最终再返回。
（nginx 所在服务器也就是代理服务器，可以和后端服务器为同一主机）
在 nginx 配置文件中设置为：
端口占用情况如下：红框是 nginx 、黄框是前端工程、蓝框是后端工程。
3.设置Access-Control-Allow-Origin允许多域名访问
方式一：设置允许多域名访问最简单的方法是使用通配符。
注：这种方式允许所有域名都可以访问，并不安全，而且这种方式浏览器不能携带cookie信息（携带cookie信息只能使用真实域名，如下面第二中方式）。这种方式只推荐在不带cookie信息的开发中测试使用。
response.setHeader("Access-Control-Allow-Origin", "*");方式二：使用数组过滤的方式
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Arrays;
import java.util.HashSet;
import java.util.Set;public class MyFilterConfig implements Filter {private Logger logger = LoggerFactory.getLogger(getClass());@Overridepublic void init(FilterConfig filterConfig) throws ServletException {logger.info("过滤器初始化");}@Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {HttpServletResponse response = (HttpServletResponse) servletResponse;HttpServletRequest request = (HttpServletRequest) servletRequest;//*表示允许所有域名跨域logger.info("进入过滤器");// 设置允许多个域名请求String[] allowDomains = {"http://www.toheart.xin","http://192.168.11.213:8080","http://localhost:8080"};Set allowOrigins = new HashSet(Arrays.asList(allowDomains));String origin = request.getHeader("Origin");if(allowOrigins.contains(origin)){//设置允许跨域的配置// 这里填写你允许进行跨域的主机ip（正式上线时可以动态配置具体允许的域名和IP）response.setHeader("Access-Control-Allow-Origin", origin);}response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");response.setHeader("Access-Control-Max-Age", "5000");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, Authorization, Token");response.setHeader("Access-Control-Allow-Credentials", "true");String method = request.getMethod();if (method.equalsIgnoreCase("OPTIONS")) {servletResponse.getOutputStream().write("Success".getBytes("utf-8"));} else {filterChain.doFilter(request, response);}}@Overridepublic void destroy() {}
}期待大家的三连击，你们的支持是我的动力。加油，猿友们！！
解决前后端跨域问题No‘Access-Control-Allow-Origin‘...相关推荐
- SpringCloud（10）—— 国寿i动项目经验之（解决前后端跨域请求技术）
国寿i动项目经验之(解决前后端跨域请求技术): 由于网段原因,导致前端js请求后端服务接口出现跨域,没法实现正常的请求,所以需要对请求进行跨域处理 引入jar: <!-- 解决前后端接口交互跨域 ...
- niginx反向代理解决前后端跨域问题
1.代理和跨域 1.1 正向代理 1)用户希望代理服务器帮助其和要访问服务器之间实现通信,需要: a.用户IP报文的目的IP=代理服务器IP: b.用户报文端口号=代理服务器监听端口号: c.HTTP ...
- nginx反向代理node，解决前后端跨域问题
nginx代理某一端口 server {listen 80;server_name www.zhangwenzong.cn;access_log /home/zhangwenzong/pb.haoli ...
- Java后端解决前后端跨域的3种方法
1.在方法上使用@CrocsOrigin注解 2.在配置类包内添加一个返回值为CorsFilter过滤器的配置类 package com.example.springboot.config;impor ...
- 解决Vue前后端跨域问题的多种方式
1 前言 本文主要介绍借助解决Vue前后端跨域问题的几种方式 说到ajax请求,就不得不说下xhr(XMLHttpRequest)了,它可以说是鼻祖,但是实际开发中,我们不会直接使用它,而是进行二次封 ...
- 解决php后端跨域header头的设置
允许指定域名访问 header('Access-Control-Allow-Origin:http://haiyuanshuo.cn'); 允许所有的访问 header('Access-Control ...
- django前后端跨域问题。 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘
https://github.com/adamchainz/django-cors-headers 自己在这里看,可以解决
- 解决前后端分离中文件传输跨域失败问题
笔者在之前的开发中就遇到过这种情况:给与后端的文件下载接口,我在浏览器在postman上试过都是可以的,但在前端上就报这种错误: 看上面的介绍是说前后端跨域问题,可是后端代码中明明配置了放行所有请求, ...
- Vue整合nginx：（1）开发环境npm run dev下，通过nginx解决前后端分离造成的跨域问题
Vue整合nginx:(1)开发环境npm run dev下,通过nginx解决前后端分离造成的跨域问题 参考文章: (1)Vue整合nginx:(1)开发环境npm run dev下,通过nginx ...
最新文章
- spring之Environment
- Spring Cloud【Finchley】实战-06使用/actuator/bus-refresh端点手动刷新配置 + 使用Spring Cloud Bus自动更新配置
- python国内书籍推荐_这些都是Python官方推荐的最好的书籍
- 离线使用iPhone SDK文档的方法
- 170329、用 Maven 部署 war 包到远程 Tomcat 服务器
- Manifold learning-based methods for analyzing single-cell RNA-sequencing data
- python调用接口上传文件_python接口自动化7-post文件上传
- qq动态页面变方格_腾讯QQ音乐9.7.5正式版更新：「歌手主页个人主页」界面全新改版...
- sed基本用法 sed文本块处理 、 sed高级应用
- Learning Modern 3D Graphics Programming笔记
- [转]mysql慢查询日志
- linux apache 停止命令,linux 下 apache启动、停止、重启命令
- 计算机我的云盘在哪里看,怎么设置在我的电脑中显示百度网盘
- Ubuntu20.4 ODBC连接数据库
- excel选中指定行数
- java csv oracle数据库_从文件(*.csv或*.txt)导入Oracle数据库Java源代码
- 基于com的delphi和matlab接口编程研究,基于COM组件的VB与MATLAB接口编程(续)
- linux实训分析与体会,linux实训总结与体会
- 1059604-93-1，m-PEG13-Ms甲磺酸基是亲核取代反应的良好离开基
- Matlab中meshgrid的用法