浏览器调用SOAP服务遇预检请求及405/415错误求解决方案

我之前也踩过浏览器调用SOAP服务的跨域坑，结合你必须用POST+text/xml的约束，整理了几个可行的解决思路：

1. 配置SOAP服务端支持OPTIONS预检请求 #

浏览器发送OPTIONS预检，是因为你的请求携带了text/xml这种非简单请求头（简单请求头仅包含Accept、Accept-Language、Content-Language，以及Content-Type限于application/x-www-form-urlencoded、multipart/form-data、text/plain）。服务端必须正确处理这个OPTIONS请求，才能让后续的POST请求正常发送。

你需要在SOAP服务端添加以下响应头：

• Access-Control-Allow-Origin: 设为你的前端域名（生产环境不建议用*通配符）
• Access-Control-Allow-Methods: 必须包含POST
• Access-Control-Allow-Headers: 必须包含Content-Type
• Access-Control-Max-Age: 可选，设置预检结果的缓存时间（比如86400秒），减少重复OPTIONS请求

举个Nginx反向代理的配置示例（如果服务端通过Nginx暴露）：

location /soap-endpoint {
    if ($request_method = OPTIONS) {
        add_header Access-Control-Allow-Origin "https://your-frontend-domain.com";
        add_header Access-Control-Allow-Methods "POST, OPTIONS";
        add_header Access-Control-Allow-Headers "Content-Type";
        add_header Access-Control-Max-Age 86400;
        return 204;
    }
    # 原有SOAP服务转发配置
    proxy_pass http://your-soap-server:port;
}

如果是Java Spring Boot服务，可以添加CORS配置类：

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("https://your-frontend-domain.com");
        config.addAllowedHeader("Content-Type");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("OPTIONS");
        config.setMaxAge(86400L);
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

2. 搭建同源代理服务器 #

如果没法修改SOAP服务端的配置，最稳妥的办法是在你的前端域名下搭一个代理服务器。浏览器把请求发给同源代理，代理再转发给SOAP服务——这样浏览器不会触发跨域预检，代理负责设置text/xml头并转发POST请求。

比如用Node.js + Express写个简单代理：

const express = require('express');
const axios = require('axios');
const app = express();

app.use(express.text({ type: 'text/xml' }));

app.post('/proxy-soap', async (req, res) => {
    try {
        const soapResponse = await axios.post('https://your-soap-service-url', req.body, {
            headers: {
                'Content-Type': 'text/xml',
                // 可添加SOAP服务需要的其他请求头
            }
        });
        res.set('Content-Type', 'text/xml');
        res.send(soapResponse.data);
    } catch (error) {
        res.status(error.response?.status || 500).send(error.message);
    }
});

app.listen(3000, () => {
    console.log('Proxy server running on port 3000');
});

前端直接请求/proxy-soap这个同源接口即可，完全避开跨域问题。

3. 使用no-cors模式发送请求（仅限无需读取响应的场景） #

如果你只需要发送SOAP请求，不需要处理返回的响应数据，可以用Fetch API的mode: 'no-cors'选项。这种模式下浏览器不会发送OPTIONS预检，也不检查跨域响应头，但代价是你无法访问响应内容（响应会变成opaque类型）。

示例代码：

const soapXml = `<?xml version="1.0" encoding="utf-8"?>
<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
    <!-- 你的SOAP请求内容 -->
</soap:Envelope>`;

fetch('https://your-soap-service-url', {
    method: 'POST',
    mode: 'no-cors',
    headers: {
        'Content-Type': 'text/xml'
    },
    body: soapXml
}).then(() => {
    // 只能确认请求发送成功，无法获取响应内容
    console.log('SOAP request sent successfully');
}).catch(err => {
    console.error('Request failed:', err);
});

这个方案局限性很强，只适合日志上报这类不需要响应结果的场景。

内容的提问来源于stack exchange，提问作者Abhinav Juneja