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

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

好吧, 那从今天起来, 继续开始保持记录的好习惯, 先写一下在 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