专栏首页java 微风springboot&ajax&has been blocked by CORS policy: No 'Access-Control-Allow-Origin

springboot&ajax&has been blocked by CORS policy: No 'Access-Control-Allow-Origin

ajax+springboot解决跨域问题,以下报的错误就是html跨域的问题

Access to XMLHttpRequest at 'http://localhost:8080/user/login1' from origin 'http://localhost:59033' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

springboot解决跨域的问题的两种方法

前端测试代码:

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
 
<body>
<div id="form-div">
    <form id="form1">
        <p>用户名:<input name="email" type="text" id="txtUserName" tabindex="1" size="15" value="" /></p>
        <p>密 码:<input name="password" type="text" id="TextBox2" tabindex="2" size="16" value="" /></p>
        <p><input type="button" value="登录" onclick="login()">&nbsp;<input type="reset" value="重置"></p>
    </form>
</div>
</body>
<script type="text/javascript" src="../static/jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
    function login() {
        $.ajax({
            //几个参数需要注意一下
            type: "POST", //方法类型
            dataType: "json", //预期服务器返回的数据类型
            url: "http://localhost:8080/user/login1", //url
            data: $('#form1').serialize(),
            success: function(result) {
                console.log(result); //打印服务端返回的数据(调试用)
                if(200 == result.resultCode) {
                    alert("SUCCESS");
                };
            },
            error: function() {
                alert("异常!");
            }
        });
    }
</script>
 
</html>

第一种:写一个class,配置的class

package com.example.demo;
 
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
 
 
/**
 * Author:Yangjingcheng
 * Date:2018/
 */
@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        return corsConfiguration;
    }
 
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        // 配置所有请求
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
}

第二种,在你要访问的Controller的方法上面加上注解 @CrossOrigin

package com.example.demo;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;
import java.util.ArrayList;
import java.util.List;
 
@Controller
public class TestController {
 
 
    @CrossOrigin
    @RequestMapping("/user/login1")
    @ResponseBody
    public List<User> userLogin(User user) {
        System.out.println(user);
        ArrayList<User> users = new ArrayList<>();
        for (int i = 0; i < 3; i++) {
            users.add(user);
        }
        return users;
    }
}

OK了

转自:https://blog.csdn.net/lovePaul77/article/details/85681404

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Springboot处理CORS跨域请求的三种方法

    浏览器出于安全的考虑,使用 XMLHttpRequest对象发起 HTTP请求时必须遵守同源策略,否则就是跨域的HTTP请求,默认情况下是被禁止的。换句话说,浏...

    陈哈哈
  • SpringBoot允许跨域无效原因

    关键F12看浏览器日志有没有Response to preflight request doesn't pass access control check,没有...

    林万程
  • Ajax CORS跨域问题解决

    出现这个问题,就是客户端和服务端域名不一样,或者协议问题,http和https; 解决这个问题 只要在服务端添加一个header

    Alone88
  • Django 解决跨域访问API失败问题

    https://www.djangoproject.com/download/2.0.13/tarball/

    授客
  • 缓存竟也能导致跨域问题?

    由于页面设计需要,页面展示图片,并可点击下载按钮进行下载(需要前端打包多个图片,所以需要使用ajax请求图片获得二进制内容,不能直接使用img或a进行下载),如...

    Java技术栈
  • Springboot解决Ajax跨域的三种方式

    这篇文章不华丽,但比较实用,能解决不少大家实际业务中的问题。大家可以收藏起来,以备用时之需!

    业余草
  • 怎样与 CORS 和 cookie 打交道[每日前端夜话0x4A]

    CORS 与 cookie 在前端是个非常重要的问题,不过在大多数情况下,因为前后端的 domain 一般是相同的,所以很少去关心这些问题。或者只是要求后端设置...

    疯狂的技术宅
  • SAP UI5 应用 XML 视图的加载逻辑分析

    鼠标放到 initiator 这一列上,找到调用栈的 UIComponent.js 的 createContent 方法:

    Jerry Wang
  • 上传文件时出现跨域问题

    所以啊,这根本不是跨域的问题,Tomcat默认上传的文件大小就是1MB,你上传的文件超过而已。

    乐心湖
  • ASP.NET WebApi+Vue前后端分离之允许启用跨域请求

      这段时间接手了一个新需求,将一个ASP.NET MVC项目改成前后端分离项目。前端使用Vue,后端则是使用ASP.NET WebApi。在搭建完成前后端框架...

    追逐时光者
  • Nginx实现跨域使用字体文件的配置方法

    本文主要给大家介绍了关于Nginx跨域使用字体文件的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍:

    习惯说一说
  • Django跨域验证及OPTIONS请求

    最近做的一个需求是:有两个后端服务器,一个是老项目(django),一个是新项目(djangorestframework),老项目不能做大的改动,只能在新项目进...

    星星在线
  • 浏览器中的跨域问题与 CORS

    跨域,这或许是前端面试中最常碰到的问题了,大概因为跨域问题是浏览器环境中的特有问题,而且随处可见,如同蚊子不仅盯你肉而且处处围着你转让你心烦。「你看,在服务器发...

    夜尽天明
  • 浏览器中的跨域问题与 CORS

    跨域,这或许是前端面试中最常碰到的问题了,大概因为跨域问题是浏览器环境中的特有问题,而且随处可见,如同蚊子不仅盯你肉而且处处围着你转让你心烦。「你看,在服务器发...

    山月
  • 解决腾讯云CDN跨域问题,has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’…

    今天弄了一下腾讯云的内容分发(CDN),就是将网站的静态文件上传到腾讯云的对象存储里,然后配置CDN,域名绑定。静态文件都能访问(如果不能访问,请检查是否是黑白...

    赵帆同学GXUZF.COM
  • CORS 完全手册之 CORS 详解

    在 CORS 完全手册之如何解决CORS 问题?里面我们提到了常见的CORS 错误解法,以及大多数状况下应该要选择的解法:「请后端加上response head...

    coder_koala
  • Vue移动端框架Mint UI教程-接口跨域问题

    这个时候,是遇到了跨域的问题; 由于接口跨域问题,因此不能直接通过ajax请求访问

    王小婷
  • 解决:The 'Access-Control-Allow-Origin' header contains multiple values'x

    版权声明:这可是本菇凉辛辛苦苦原创的,转载请一定带上我家地址,不要忘记了哈 . https://b...

    微风-- 轻许--
  • SpringBoot跨域及后端解决方案

    Access-Control-Allow-Origin:http://somehost.com 表示允许http://somehost.com发起跨域请求。

    框架师

扫码关注云+社区

领取腾讯云代金券