Ajax的跨域问题

最新推荐文章于 2023-08-25 22:54:23 发布

专业跳大神儿

最新推荐文章于 2023-08-25 22:54:23 发布

阅读量313

点赞数

文章标签： debug

本文链接：https://blog.youkuaiyun.com/always_younger/article/details/80421239

版权

在前后端分离项目中，前端调用后台接口时遇到跨域错误，表现为'Access-Control-Allow-Origin'头缺失，导致访问被禁止。解决方法是在后端设置拦截器，允许指定来源，从而实现跨域数据传输。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用前后端分离的方式来搭建项目的时候，前端访问后台接口出现了数据正常返回但是却报错：

Failed to load http://localhost:8080/management/equipment/loadEquipmentByIdOrTypeOrNameCountByLimit: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8088’ is therefore not allowed access.

createError.js?f777:15 Uncaught (in promise) Error: Network Error

at createError (createError.js?f777:15)

at XMLHttpRequest.handleError (xhr.js?14ed:87)

:8088/#/table:1

原因：Ajax的跨域问题，

     什么是跨域问题： 只要协议、域名、端口有任何一个不同，都被当作是不同的域，之间的请求就是跨域操作。

    这里是因为前后端的端口号不同，毕竟是在本机上实验。跨域问题是一种后台的安全验证策略。

解决：只是在后台添加了一个拦截器，将所有准许的源都加上相应的首部，实现跨域数据的传输。

package com.equipment.management.system.filter;



import javax.servlet.*;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.util.Set;



public class AccessFilter implements Filter {

@Override

public void init(FilterConfig filterConfig) throws ServletException {

    }



//这里是将所有的源都设置为准许了，可以根据不同的源地址进行拦截

@Override

public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {

        HttpServletResponse httpResponse = (HttpServletResponse) res;

String originHeader = ((HttpServletRequest) req).getHeader("Origin");

((HttpServletResponse) res).setHeader("Access-Control-Allow-Origin", "*");

((HttpServletResponse) res).setContentType("application/json;charset=UTF-8");

((HttpServletResponse) res).setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");

((HttpServletResponse) res).setHeader("Access-Control-Max-Age", "3600");

((HttpServletResponse) res).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,userId,token");//表明服务器支持的所有头信息字段

((HttpServletResponse) res).setHeader("Access-Control-Allow-Credentials", "true"); //如果要把Cookie发到服务器，需要指定Access-Control-Allow-Credentials字段为true;

((HttpServletResponse) res).setHeader("XDomainRequestAllowed", "1");

chain.doFilter(req, res);

        return;

}



@Override

public void destroy() {



    }

}