使用JQuery调用Web Service遇CORS错误但返回XML的问题求助

嘿，我碰到过好多类似的CORS坑，咱们好好捋捋这个问题哈！

核心原因是浏览器的同源策略——这是浏览器自带的安全机制，默认只允许网页请求和自己「域名、协议、端口」完全一致的资源。你的前端页面和运费计算的Web Service不在同一个源，浏览器就会触发CORS检查：

• 要么在发送实际请求前先发送一个OPTIONS预检请求，要么在收到响应后检查响应头里的CORS相关字段
• 哪怕Web Service已经把XML数据发回来了，只要响应头里没有允许当前域名访问的CORS标识（比如Access-Control-Allow-Origin），浏览器就会直接拦截这个响应，不让你的JavaScript代码拿到数据。这就是为啥你在网络面板能看到返回内容，但控制台会报错的原因。

你疑惑Web Service就是用来给应用提供访问的，这点没错，但浏览器的安全规则给前端访问加了一层限制——这不是Web Service的问题，是浏览器为了防止恶意网站盗用用户数据的保护策略。

根据你的实际情况，有几种可行方案：

1. 让Web Service服务器配置CORS响应头（最优解） #

这是最直接的办法，需要Web Service的维护者在响应中添加CORS相关的HTTP头：

• 允许你的前端域名访问：Access-Control-Allow-Origin: 你的前端域名（如果是测试环境可以临时用*允许所有域名，但生产环境不推荐这么做）
• 如果你的请求用了POST/PUT等方法，或者带了自定义请求头，还需要添加Access-Control-Allow-Methods、Access-Control-Allow-Headers这些字段

2. 自己搭个后端代理（没法改Web Service时用） #

如果没法让Web Service改配置，你可以在自己的后端服务器上写一个中转接口：由这个接口去调用运费计算的Web Service，再把结果返回给前端。因为服务器之间的请求不受浏览器同源策略限制，这样前端只需要请求自己的后端接口，就不会有CORS问题了。

举个Node.js（Express）的简单代理例子：

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

// 中转接口
app.get('/api/shipping-fee', async (req, res) => {
  try {
    // 调用目标Web Service
    const wsResponse = await axios.get('你的运费Web Service地址', {
      params: req.query // 把前端传来的参数转递给Web Service
    });
    res.send(wsResponse.data); // 返回XML数据给前端
  } catch (error) {
    res.status(500).send('请求运费服务失败：' + error.message);
  }
});

app.listen(3000, () => console.log('代理服务器跑在3000端口啦'));

然后你的jQuery代码就改成请求这个代理接口：

$.get('/api/shipping-fee', { 
  // 这里放你原来要传给Web Service的参数，比如productId, weight等
}, function(xmlData) {
  // 处理返回的XML数据
});

3. 本地开发临时方案（仅用于开发环境） #

如果是本地开发时遇到的问题，可以用浏览器的跨域插件（比如Chrome的「Allow CORS: Access-Control-Allow-Origin」），或者在你的前端开发服务器里配置代理（比如Vue、React的脚手架都自带代理配置）。不过这些方法只能用于开发测试，绝对不能用到生产环境哦！

内容的提问来源于stack exchange，提问作者Diego Alves