vue axios跨域访问相关问题 | axios默认发送‘application/x-www-form-urlencoded‘格式数据 | Content-Type is not allowed b

最新推荐文章于 2024-10-30 15:20:43 发布

就是爱吃肉ro

最新推荐文章于 2024-10-30 15:20:43 发布

阅读量1.3k

点赞数

分类专栏： # Vue & uni-app 文章标签： axios ajax cors跨域 vue x-www-form-url

本文链接：https://blog.csdn.net/weixin_44510468/article/details/107075734

版权

本文介绍了在使用axios进行跨域请求时遇到的Content-Type不被允许和返回500状态码的问题，分析了原因并提供了后端与前端的解决办法。包括在后端过滤器设置Access-Control-Allow-Headers，处理OPTIONS请求，以及前端如何设置axios的Content-Type为x-www-form-urlencoded，使用qs库转换请求数据格式。

摘要由CSDN通过智能技术生成

文章目录

概述
报错1 Content-Type is not allowed by Access-Control-Allow-Headers in preflight respon
报错2 返回状态码500

好久没更博客了, 最近一直搞框架搞项目, 好多问题也都没有记录下来…

好吧, 那从今天起来, 继续开始保持记录的好习惯, 先写一下在 axios 上踩下了这么多坑.

概述

通过以下两个报错, 来介绍解决使用 axios 来进行网络请求中的遇到的跨域问题

报错一对应服务器端需要的处理方式

报错二对应客户端需要的处理方式

这两种是都要添加进去的 !!!

报错1 Content-Type is not allowed by Access-Control-Allow-Headers in preflight respon

这是因为 Access-Control-Allow-Headers 这个请求头没有在后端设置好, 解决方案就是在后端的过滤器上设置好五行 response 加上判断预处理

这里的的 OPTIONS 请求方式, 是 axios 的预处理

比如发一次 POST, 他会先发一次 OPTIONS 再发一次 POST

如果没有对 request.getParameter() 取值进行处理, 那么第一次将是null, 导致报错中止请求, 所以需要主动给返回成功!

package com.excellence.filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.nio.charset.StandardCharsets;

@WebFilter ( "/*" )
public class CORSFilter implements Filter {
   
    public void destroy ( ) {
   
    }

    public void doFilter ( ServletRequest req, ServletResponse resp, FilterChain chain ) throws ServletException, IOException {
   
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) resp;
        response.setHeader( "Access-Control-Allow-Origin", request.getHeader( "Origin" ) );
        response.setHeader( "Access-Control-Allow-Methods", "*" );
        response.setHeader( "Access-Control-Allow-Headers", "*" );
        response.setHeader( "Access-Control-Allow-Credentials", "true" );
        response.setHeader( "Access-Control-Max-Age", "3600" );
        if ( request.getMethod( ).equalsIgnoreCase( "OPTIONS" ) ) {
   
            resp.getOutputStream( ).write( "Success".getBytes( StandardCharsets.UTF_8 ) );
        } else {
   
            chain.doFilter( (ServletRequest) request