使用Ajax通过post向后端发送数据时，出现越界错误

使用Ajax通过post向后端发送数据时，出现越界错误， from origin 'null' 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.已经在Java代码中添加CORS（跨域资源共享）拦截器但是没有用,通过配置web.xml的过滤器我也写了但是没用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发送Ajax请求</title>
   <script src="./js/jquery-3.4.1.min.js"></script>
</head>
<body> 
    <form>
    <label for="username">用户: </label>
    <input type="text" id="username"  name="username"><br>
    <label for="password">密码: </label>
    <input type="password" id="password" name="password">
    <br>
    <input type="button" id="submit" value="提交">
    </form>
    <script>
        $("#submit").click(function(){
            // 获取输入的用户名和密码
            var username = $("#username").val();
            var password = $("#password").val();
             // 对用户名和密码进行验证和过滤
            if(username.length === 0 || password.length === 0){
                // 用户名或密码为空，进行相应处理
                return;
            }
            var requestData = {
                            username: username,
                            password: password
                            };
            // 发送Ajax请求
            $.ajax({
                url:"http://localhost:80/user/web",
                type:'post',
                data: requestData,
                dataType: 'json',
                contentType:'application/json',
                success: function(res){
                    // 请求成功的处理
                    window.alert("成功",res);
                },
                error: function(xhr){
                    window.alert("错误",xhr);
                },
                complete: function(xhr){
                    console.log('完成',xhr);
                }
            });
        });
    </script>
</body>
</html>


```java
//Controller类
@RestController
@RequestMapping("/user")
//@CrossOrigin(origins = "*", allowedHeaders = "*", methods = {RequestMethod.GET, RequestMethod.POST, RequestMethod.PUT, RequestMethod.DELETE})
public class UserController {

   

    @PostMapping("/web")
    public String WebSave(@RequestBody WebUser webUser){
        System.out.println("name: "+webUser.getUsername()+"\npassword: "+webUser.getPassword());
        return "test.html";
    }
    @PostMapping("/web1")
    public String WebSave1(String name,String password){
        System.out.println("name: "+name+"\npassword: "+password);
        return "1234";
    }
}

//自己定义用来接收数据的web user类
public class WebUser {
    private String username;
    private String password;
}

//Config类
//1.配置类
//@Import(WebMvcConfig.class)
public class ServletInitConfig extends AbstractAnnotationConfigDispatcherServletInitializer {

    protected Class<?>[] getRootConfigClasses() {
        return new Class[]{SpringConfig.class};
    }

    protected Class<?>[] getServletConfigClasses() {
        return new Class[]{SpringMvcConfig.class};
    }

    protected String[] getServletMappings() {
        return new String[]{"/"};
    }
}
@Configuration
@ComponentScan({"com.demo.Class","com.demo.dao"})
public class SpringConfig {
}
@Configuration
@ComponentScan("com.demo.Controller")
@EnableWebMvc
public class SpringMvcConfig {
}

2.拦截器的配置文件
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new CorsInterceptor());
    }
}

//拦截器
public class CorsInterceptor implements HandlerInterceptor {
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        response.setHeader("Access-Control-Allow-Origin", "*");//允许所有来源访同
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");//允许访问的方式
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        return true;
    }
}

//过滤器
public class CorsFilter implements Filter {
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        chain.doFilter(req, res);
    }
    public void init(FilterConfig filterConfig) throws ServletException {
        // 初始化方法
    }
    public void destroy() {
        // 销毁方法
    }
    public boolean isLoggable(LogRecord record) {
        return false;
    }

    // 其他方法
}
//web.xml
<web-app>
  <display-name>Archetype Created Web Application</display-name>
  <filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>com.demo.Class.CorsFilter</filter-class>
</filter>

  <filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>



我全部代码都粘上了，刚开始学这个，弄了一天一点头绪都没有，最开始其他的那些405，403之类的报错我能改都带掉了，我想要达到的效果就是能够通过Ajax代码实现前端向后端传输json格式的数据封装到对应类里面，然后在后端控制台打印出来。
我在说一下，我这里用的jdk8，tomcat7（maven自带的那个），是springmvc框架，前端就是纯html和js（就能输入数据，并提交给后端就可以了）

CORS 是跨域错误，配个跨域的中间件或者配置就行了

你这是跨域请求了，我之前uni-app开发字节小程序也遇到过，具体搞法忘记了

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 这篇文章：Ajax跨域时出现Access to XMLHttpRequest at *** from origin *** has been been blocked by CORS policy 也许有你想要的答案，你可以看看
  • 除此之外, 这篇博客: 解决xxx by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on the requested resource问题中的 CORS 跨域资源共享 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

    CORS 跨域资源共享，即Cross-Origin Resource Sharing。它新增的一组 HTTP 首部字段允许服务器其声明那些来源请求有权访问哪些资源，就是它允许浏览器向其声明了 CORS 的栈进行跨域请求。

    这种方式最主要的特点就是会在响应的 HTTP 首部增加 Access-Control-Allow-Origin 等信息，从而判定那些资源站可以进行跨域请求，还有几个其他相关的 HTTP 首部进行更加精细化的控制，最主要的还是Access-Control-Allow-Origin 。

    CORS 与 JSONP 对比来说又是比较明显，JSONP 只支持 GET 方式，而且 JSONP 并不符合处理业务的正常流程。采用 CORS 的方式，前端编码与正常非跨域请求没有什么不同。

    1. 客户端发送请求(ajax)：

    在真正的发送跨域请求之前会发送一个试探性请求（OPTIONS），服务器接收到 OPTIONS请求之后，做一个处理，返回成功，表示可以发送跨域请求，再发送真正的跨域请求

    服务端设置相关的头信息（需要处理试探性请求OPTIONS）

    1. 带 cookie 跨域请求：前后端都需要进行设置

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

可以利用nginx反向代理来解决跨域问题。

ip:端口号换成域名试试

dataType: 'jsonp'，试一下看能绕过不

在后台的请求接口中放开跨域一般就可以解决。

别听他们说，你本地的没有跨域，即使报了这种错误，也别去想着配置跨域（没用的、浪费时间），原因主要就是哪里一个细节搞错了，ajax这个地址：url:"http://localhost:80/user/web",如果的页面跟后端在同一个项目，可以改成相对路径试试

前后端分离，jquery使用post请求出现跨越以及相关错误
可以参考下，现成的

看下这篇文章，应该是你CORS跨域配置缺少了某些内容：

【SpringBoot笔记20】SpringBoot跨域问题之CORS的四种解决方案_springboot cors_朱友斌的博客-CSDN博客 跨域问题，是指：浏览器发起了一个不在当前域名下的其他资源，从而使得浏览器端发生报错的情况。// 端口不同// 协议不同// IP地址不同// 只有相同协议、域名、端口下的才能够访问跨域问题是发生在浏览器端的，浏览器能够正常访问到后端的接口，并且有返回，但是浏览器端，发现跨域了，于是就抛出来一个异常，从而导致浏览器无法解析接口返回的响应数据，跨域报错如下所示：上面案例是前端【】这个域，通过ajax访问【】域的时候，浏览器抛出的跨域异常信息。_springboot cors https://blog.csdn.net/qq_39826207/article/details/127624414

我最近碰到过
你服务端在options 请求头中 返回allow header 什么的那个请求头 为星号 就可以请求成功了
这不是跨域的 是预请求失败 你搜搜看预请求失败

前端是否有单独的端口？跟后端端口是否一致，端口一致的话不会有跨域问题，端口不一致，最简单有效的方式是下载一个nginx，进行代理，把前端请求通过nginx转发给后端，这样就不会遇到这样的错误，另外，后台是可以配置跨域的，但是这个配置是要看情况的，如果添加了权限组件，则跨域配置会很麻烦，java配置跨域，csdn上可以搜到很多答案，需要一个一个的尝试

涉及到Ajax通过post向后端发送数据时出现越界错误，需要仔细分析错误的原因和可能的解决办法。本文将详细讲解该问题的可能原因以及解决办法，希望能够对大家有所帮助。

一、Ajax请求的流程

首先，我们需要了解一下Ajax请求的流程。Ajax（Asynchronous JavaScript and XML，异步的 JavaScript 和 XML）是一种用于创建快速动态网页的技术。本质上，Ajax 是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。Ajax请求的基本流程如下：

  1. 创建 XMLHttpRequest 对象
  2. 发送请求
  3. 服务器处理请求并返回数据
  4. 接收返回的数据
  5. 处理返回的数据
  6. 把数据渲染到页面中

二、什么是“越界错误”

在进行Ajax请求时，有时会遇到“越界错误”的问题。所谓“越界错误”是指当数组的下标超出了数组的范围时，就会发生越界错误。例如，数组长度为5，却试图访问第6个元素，就会导致越界错误。

在Ajax请求中，越界错误通常是指向后端发送数据时出现的问题。即：在使用post方式向后端发送数据时，出现了越界错误。

三、可能的原因

出现越界错误的原因可能有很多种。下面列举几种比较常见的情况：

  1. 数据格式不正确

在向后端发送数据时，如果数据格式不正确，例如没有按照后端要求的格式进行编写，就会导致越界错误的问题。此时，我们需要检查一下数据格式是否正确，并且确认数据是否有缺失或者多余的部分。

  1. 数据长度过长

向后端发送数据时，如果数据长度过长，就有可能导致越界错误。这种情况下，我们需要检查一下数据的长度，并且确认后端是否可以接收这么长的数据。

  1. 后端接收数据的方式不正确

有时候，越界错误可能是由于后端接收数据的方式不正确导致的。例如，后端要求使用表单形式提交数据，但是我们使用的是Ajax方式提交数据，就可能导致越界错误的问题。此时，我们需要确认一下后端要求使用何种方式接收数据，并且对应修改我们的代码。

  1. 其他问题

除了上述几种情况外，越界错误还可能由于其他原因导致。例如，网络问题、服务器端问题等等。此时，需要认真排查错误，并且根据实际情况进行处理。

四、解决办法

针对不同的原因，我们可以采取不同的解决办法。下面列举几种常见的解决方法：

  1. 检查数据格式是否正确

如果出现越界错误，我们首先要检查一下数据格式是否正确。如果数据格式不正确，就需要对数据进行调整，并且确认数据是否有缺失或者多余的部分。

  1. 检查数据长度是否过长

如果数据长度过长，就需要考虑对数据进行压缩或者分批发送。例如，可以使用gzip对数据进行压缩，减少数据的大小。或者可以将数据分成多个部分，分别发送到后端，避免数据长度过长。

  1. 确认后端接收方式是否正确

如果出现越界错误，我们还需要确认一下后端接收数据的方式是否正确。如果后端要求使用表单形式提交数据，我们就需要使用表单提交数据，并且确认表单元素的名称是否正确。如果使用Ajax方式提交数据，就需要确认后端是否可以接收这种方式发送的数据。

  1. 加入容错处理

在进行Ajax请求时，可能会遇到网络问题或者服务器端问题，这些问题都有可能导致越界错误的问题。为了解决这些问题，我们可以加入容错处理。例如，可以加入超时处理、重试机制等等，提高请求的稳定性和可靠性。

五、总结

在使用Ajax向后端发送数据时，出现越界错误是一种比较常见的问题。出现这种问题时，我们需要仔细分析错误的原因，并且根据实际情况采取相应的解决办法。在编写Ajax请求的代码时，我们需要注意数据格式、数据长度、后端接收方式等一些细节问题，以避免出现越界错误等常见问题，提高代码的质量和稳定性。

首先调试过滤器代码，确保下面这段代码正确配置
response.setHeader("Access-Control-Allow-Origin", "*");
一般来说后端配置CORS之后，前端就不需要再次配置
目前我觉得主要问题还是后端你配置了跨域，但是未配置生效

出现跨域资源共享（CORS）错误通常是由于服务器未设置适当的的数据访问控制导致的。在你的情况下，出现错误的原因可能是由于请求的URL与请求的origin不同，因此被服务器阻止了。你可以在后端服务的器的响应头中添加 Access-Control-Allow-Origin，将其设置为容许的来源URL。

存在跨域

CORS跨域配置少了东西

这个错误是由于浏览器的同源策略导致的跨域请求问题。为了解决这个问题，你需要在后端服务器上配置CORS（跨域资源共享）头来允许跨域请求。
在Java中，你可以使用Filter或Interceptor来配置CORS头。如果你已经在代码中添加了CORS拦截器但没有生效，可能是由于配置不正确或者没有正确应用该拦截器。
首先，确保你在CORS拦截器中正确设置了允许跨域请求的头信息。以下是一个示例的CORS拦截器配置代码：

img

确保该拦截器类上添加了@Component注解，并且被正确扫描到。
另外，确保在你的配置文件中启用了拦截器，例如使用@EnableWebMvc注解来开启Spring MVC的配置：

img

如果你已经正确配置了CORS拦截器，但仍然出现错误，可能是由于其他浏览器安全策略所致。你可以尝试在后端服务器中配置CORS过滤器，如下所示：

  1. 打开web.xml文件。
  2. 在<web-app>标签内添加以下CORS过滤器配置：

img

  1. 创建CORSFilter类，实现javax.servlet.Filter接口，并在doFilter方法中设置CORS头信息：

img

确保你的过滤器类被正确配置和识别。重新启动你的应用程序并尝试发送跨域请求。
如果以上方法无效，还可以尝试使用其他浏览器插件或工具来解决CORS问题，如谷歌浏览器的"CORS Unblock"插件或通过代理服务器发送请求等。

在使用Ajax进行POST请求时，出现越界错误可能是由于多种原因导致的。以下是可能导致此问题的几种情况及解决方法：

  1. 未正确设置请求头

在使用Ajax来发送POST请求时，需要设置请求头来指定请求的方式以及要发送数据的格式。如果未正确设置请求头，则会提示错误。

解决方法：在发送POST请求前，确保已正确设置请求头。例如：

var request = new XMLHttpRequest();
request.open("POST", "http://www.example.com/api", true);
request.setRequestHeader("Content-Type", "application/json");
request.send(data);
  1. 发送的数据超出服务器限制

如果发送POST请求时，要发送的数据量超过了服务器的限制，则会提示错误。

解决方法：检查要发送的数据量是否超过了服务器的限制。可以通过减少数据量、压缩数据等方式来解决。

  1. 数据格式不正确

如果发送的数据格式不正确，例如要求发送的是JSON格式的数据，但是发送的数据却不是JSON格式，则会提示错误。

解决方法：检查要发送的数据是否符合要求，例如是否是正确的JSON格式。

  1. 数据长度不正确

如果发送的数据长度与服务器要求的长度不一致，则会提示错误。

解决方法：检查要发送的数据长度是否符合服务器要求。

  1. 其他原因导致的错误

在使用Ajax发送POST请求时，还可能会出现其他的错误，例如服务器端程序的bug、网络连接不稳定等原因，这些都可能导致请求失败或报错。

解决方法：排查具体原因，可以通过查看服务器端日志、网络连接状态等方式来排查问题。

总之，在使用Ajax发送POST请求时，需要仔细检查请求的各项参数，并且对各种可能出现的问题进行充分的预判和处理，才能确保请求的成功。

参考newbing
出现CORS错误通常是由于浏览器的同源策略引起的，它限制了在不同域之间进行跨域请求。为了解决这个问题，你需要在后端服务器配置中添加相应的CORS头信息。

在Java中，可以通过在响应中添加Access-Control-Allow-Origin头来解决CORS问题。这个头指定了可以访问资源的域名。你可以将其设置为*来允许任何域名访问资源，或者设置为特定的域名。

首先，确保你的后端服务器已经添加了CORS拦截器或过滤器，如下所示：

import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

上述代码中，我们创建了一个CorsConfig类，并使用@Configuration注解将其标记为配置类。然后，我们创建了一个CorsFilter的Bean，并配置了CorsConfiguration，允许所有域名访问资源。

如果你已经添加了CORS拦截器或过滤器，但问题仍然存在，那么可能是因为你的配置没有生效。你可以尝试以下方法来解决问题：

  1. 确保你的CORS配置类被正确加载。你可以在启动应用程序时查看控制台输出，确认是否有关于CORS配置的日志信息。
  2. 检查你的CORS配置类的包路径是否正确。确保它在Spring扫描的包路径下。
  3. 检查你的CORS配置类的命名是否正确。确保它的命名符合Spring的命名约定。

如果上述方法都没有解决问题，你可以尝试使用其他方式来处理CORS问题，例如在web.xml中配置过滤器：

<filter>
    <filter-name>CORSFilter</filter-name>
    <filter-class>com.example.CORSFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>CORSFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

上述代码中，我们创建了一个名为CORSFilter的过滤器，并将其映射到所有的URL模式。你需要将com.example.CORSFilter替换为你实际的过滤器类。

请确保在使用任何配置时，仔细检查代码和配置是否正确，并确保服务器已经重新启动以使更改生效。