在本地启动Spring Boot后端和Angular前端调试时遇到跨域访问的问题导致前端请求失败。

错误描述

Access to XMLHttpRequest at 'http://localhost:8080/...' from origin 'http://localhost:4201' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决方案

添加一个Filter使后端支持跨域访问,Spring Boot会自动扫描Filter,无需手动添加。

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component; @Component
public class SimpleCORSFilter implements Filter { private final Logger log = LoggerFactory.getLogger(SimpleCORSFilter.class); public SimpleCORSFilter() {
log.info("SimpleCORSFilter init");
} @Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletRequest request = (HttpServletRequest) req;
HttpServletResponse response = (HttpServletResponse) res; response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me"); chain.doFilter(req, res);
} @Override
public void init(FilterConfig filterConfig) {
} @Override
public void destroy() {
} }

参考:https://stackoverflow.com/questions/32319396/cors-with-spring-boot-and-angularjs-not-working

转载请注明出处:https://www.cnblogs.com/keitsi/p/10594758.html

Requests blocked by CORS policy in spring boot and angular的更多相关文章

  1. 前后端分离 导致的 静态页面 加载 <script type="module" > 报CORS 跨域错误,提示 blocked by CORS policy

    1.前言 静态页面 加载 <script type="module" > 报CORS 跨域错误,提示Access to script at ftp:///xxx.js ...

  2. ElementUI项目请求SpringBoot后台项目时提示:Access to XMLHttpRequest at **from origin ** has been blocked by CORS policy

    场景 搭建ElementUI前端项目后提示: Access to XMLHttpRequest at **from origin ** has been blocked by CORS policy ...

  3. 【记录】uni-app Chrome跨域解决方案插件 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is...

    博主最近在用Hbuilder X开发前端网页时, 出现了has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header ...

  4. has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    前端显示: has been blocked by CORS policy: Response to preflight request doesn't pass access control che ...

  5. Spring Boot 集成Angular程序

    假设 1.你已经完成了Spring Boot的示例,在浏览其中输入http://localhost:8080/index,能够返回html页面. 2.你已经完成了Angular程序,名字为quicks ...

  6. Access to XMLHttpRequest at xxxx from origin ‘null‘ has been blocked by CORS policy:

    使用前后端分离的方式创建web项目的时候出现问题: 这是因为 ajax 请求的对应的域在本地的一个文件路径,比如在D盘的某个文件夹,这里存放的都是前端文件: 但是对应的服务器是 localhost 的 ...

  7. VUE 出现Access to XMLHttpRequest at 'http://192.168.88.228/login/Login?phone=19939306484&password=111' from origin 'http://localhost:8080' has been blocked by CORS policy: The value of the 'Access-Contr

    报错如上图!!!!    解决办法首先打开 config -> index.js ,粘贴 如下图代码,'https://www.baidu.com'换成要访问的的api域名,注意只要域名就够了, ...

  8. Access to XMLHttpRequest at 'XXX' from origin 'XX' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present o AJAX跨域请求解决方法

    今天出现了一个问题找了好久先看代码: 这可能是个BUG吧插入代码: dataType: 'jsonp', crossDomain: true, 最终:

  9. has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

    https://www.cnblogs.com/caimuqing/p/6733405.html // TODO 支持跨域访问 response.setHeader("Access-Cont ...

随机推荐

  1. 用一段直径为1的原木制作截面是矩形的横梁,问梁的宽度x和高度y是怎样的比例时,才能使梁的强度最大?

    解:根据经验,梁的强度与高度平方成正比,和宽度成反比,可以写成 q=y2x 又有x2+y2=1,得到 q=(1-x2)x=x-x3 而导数q'=1-3x2,当q'=0时,q有极值 q'=0时,x=1/ ...

  2. 使用notepad++进行替换

    将 aaa bbb ccc 转化为 #define AAA aaa #define BBB bbb #define CCC ccc 查找(.*),替换为#define $1 "$1" ...

  3. Nginx TCP Proxy模块的编译安装

    这次用一个国内开发者在GitHub上的开源项目https://github.com/yaoweibin/nginx_tcp_proxy_module 我的系统已经安装了最新的Nginx,现在需要下载源 ...

  4. Vue 源码 基础知识点

    1.数据类型判断 const _toString = Object.prototype.toString function toRawType(value) { return _toString.ca ...

  5. C语言中递归什么时候能够省略return引发的思考:通过内联汇编解读C语言函数return的本质

    事情的经过是这种,博主在用C写一个简单的业务时使用递归,因为粗心而忘了写return.结果发现返回的结果依旧是正确的.经过半小时的反汇编调试.证明了我的猜想,如今在博客里分享.也是对C语言编译原理的一 ...

  6. xml xpath dta笔记

    xml: 有且只有一个根元素 默认utf-8 如果是中文且为不是utf-8的必须指定编码 声明的编码必须和文档的内容保持一致 well-formed XML :是否符合xml语法 valid xml: ...

  7. ADexplorer - 用来查看AD的工具

    ADExplorer是一款可以帮助查看和编辑数据库的软件.该数据库查看编辑器使用方便,操作简单,用户可通过该软件进行浏览AD数据库.自定义快速入口.查看对象属性.编辑权限.精确搜索等操作,还可以保存数 ...

  8. 常用/常见Java Web 服务器/应用服务器Logo图文介绍

    常用/常见应用服务器介绍:自己总结.整理一些常见的应用服务器,资料主要来源于网上.     常用Java Web 服务器Java Web应用程序需要部署在Java web服务器中运行,常用的Java ...

  9. jQuery ajax 流程全解析

    实例解析java + jQuery + json工作过程(登录) 本文主要讲解在java环境下使用jQuery进行JSON数据传送的交互过程 参考根据作者的账务管理系统(个人版) 源码下载 讲解 一. ...

  10. 总结js(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作

    http://hi.baidu.com/yashua839/blog/item/131fdb2fe547ef221f3089af.html一.Iframe 篇 //&&&&am ...