后端配置了跨域配置前端访问还是提示跨域

后端配置文件:

@Configuration
public class WebAppConfiguration implements WebMvcConfigurer {

	/**
	 * 解决跨域问题
	 **/
	@Override
	public void addCorsMappings(CorsRegistry registry) {
		registry.addMapping("/**")
				// 设置允许跨域请求的域名
				.allowedOrigins("*")
				// 是否允许证书
				.allowCredentials(true)
				// 设置允许的方法
				.allowedMethods("GET", "POST", "DELETE", "PUT", "OPTIONS", "HEAD", "PATCH")
				// 设置允许的header属性
				.allowedHeaders("*")
				// 跨域允许时间
				.maxAge(3600);
	}


}

跨域报错:我的接口中用到的参数是HttpServletRequest对象,这个对象容易获得,所以不存参数问题,所以后端接口是可以直接访问的,但是在这个接口中我用HttpServletRequest对象在获取Cookie时出现了问题,因为在前端setCookie没有成功,导致这里一直没有获取到cookie,数据返回一直为null,而访问其他接口时又用到这个数据,导致其他接口出现如上Access-Control-Allow-Origin错误。

解决办法:在过滤器中添加以下方法便可以成功解决,注意Access-Control-Allow-Origin不要设置为*,设置为*有可能还是会提示跨域

@Component
public class AuthFilter implements Filter {

  

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) resp;
        response.addHeader("Access-Control-Allow-Origin", request.getHeader("origin"));
        response.addHeader("Access-Control-Allow-Credentials", "true");
        
        chain.doFilter(request, response);
        

    }

    @Override
    public void destroy() {

    }

   
}

那么使用GET方法确实是不跨域了,但是在使用POST提交数据的时候,发现前端又提示跨域,实际上现在就简单了,前端有一个组件QS,前端在发送请求的时候 使用qs包装一下请求参数;

axios.post("/api", qs.stringify({
				      name: "ALin",
					  id: "666"
				})).then(res => {
				
				})

参考文档:写了Access-Control-Allow-Origin,还报跨域错误解决过程 | 码农家园

已解决:axios get请求不跨域,post请求跨域了_阿林阿林的博客-CSDN博客_get不跨域 但post跨域

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端可以通过设置请求头来配置跨域。在发送跨域请求时,在请求头中添加 "Origin" 字段,字段的值为允许跨域访问的域名或 IP 地址。对于常见的跨域请求,可以使用以下方法进行配置: 1. 使用 XMLHttpRequest 或 Fetch API 发送请求时,可以通过设置 `XMLHttpRequest` 对象或 `fetch` 函数的 `headers` 属性来添加请求头。 ```javascript const url = 'http://example.com/api'; // 跨域请求的目标地址 const xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.setRequestHeader('Origin', 'http://your-frontend-domain.com'); // 设置允许跨域访问的域名 xhr.send(); ``` 或者使用 Fetch API: ```javascript const url = 'http://example.com/api'; // 跨域请求的目标地址 fetch(url, { headers: { 'Origin': 'http://your-frontend-domain.com' // 设置允许跨域访问的域名 } }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)); ``` 2. 如果使用基于 axios 的 HTTP 客户端,可以通过在请求配置对象中设置 `headers` 属性来添加请求头。 ```javascript const axios = require('axios'); // 导入 axios 库 const url = 'http://example.com/api'; // 跨域请求的目标地址 axios.get(url, { headers: { 'Origin': 'http://your-frontend-domain.com' // 设置允许跨域访问的域名 } }) .then(response => console.log(response.data)) .catch(error => console.error(error)); ``` 以上是一些常见的前端跨域配置方法,请根据你使用的 HTTP 请求库或工具适配。另外,还需确保后端服务已经配置跨域访问的规则,否则即使前端配置了也无法生效。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值