使用Axios向企业JIRA发送GET请求时遭遇CORS问题的解决问询

我能在浏览器直接访问 https://jira.intranet.company.com/rest/agile/1.0/epic/key-18/issue 获取某Epic下的所有问题，但用以下Axios代码发送GET请求时，被CORS策略拦截：

let axiosUrl = 'https://jira.intranet.company.com/rest/agile/1.0/epic/key-18/issue'
axios({
    baseURL: axiosUrl,
    method: 'get',
    headers: {
        "Content-Type": "application/json",
        'X-Atlassian-Token':'no-check',
        'Authorization': 'Basic myawesomebase64key',
    },
    //timeout: 2000,

})
    .then((res) => {
        console.log(res.data)
    })
     .catch(function (error) {
         console.log(error);
     });

错误提示：

Access to XMLHttpRequest at 'https://jira.intranet.company.com/rest/agile/1.0/epic/key-18/issue' from origin 'http://localhost:9098' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

1. 后端（JIRA服务器）配置CORS允许本地源 #

联系公司运维或JIRA管理员，在JIRA服务器的CORS配置中添加 http://localhost:9098 到允许的源列表，同时确保响应头包含：

• Access-Control-Allow-Origin：指定允许的源
• Access-Control-Allow-Headers：需包含请求中用到的Authorization、X-Atlassian-Token等字段
  这是最合规、彻底的解决方式。

2. 本地开发用代理转发 #

通过前端项目的代理配置，让请求先转发到本地服务器，再由本地服务器请求JIRA API，绕过浏览器的CORS检查：

• Vue项目：在vue.config.js中添加代理配置

module.exports = {
  devServer: {
    proxy: {
      '/jira-proxy': {
        target: 'https://jira.intranet.company.com',
        changeOrigin: true,
        pathRewrite: { '^/jira-proxy': '' }
      }
    }
  }
}

修改Axios请求URL：

let axiosUrl = '/jira-proxy/rest/agile/1.0/epic/key-18/issue'
axios({
    url: axiosUrl,
    method: 'get',
    headers: {
        "Content-Type": "application/json",
        'X-Atlassian-Token':'no-check',
        'Authorization': 'Basic myawesomebase64key',
    },
})

• React项目：在package.json中添加代理字段

"proxy": "https://jira.intranet.company.com"

请求URL直接改为 /rest/agile/1.0/epic/key-18/issue 即可。

3. 浏览器插件临时绕过CORS（仅开发测试） #

安装CORS Unblock类浏览器插件，临时禁用浏览器的CORS检查。注意这仅适用于本地开发测试，不能用于生产环境。

4. 自建中转服务 #

如果无法修改JIRA服务器配置，可以自己写一个简单的后端中转服务，前端请求该服务，再由服务调用JIRA API返回结果（服务器端请求不受CORS限制）。示例Node.js中转服务：

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

app.get('/get-jira-issues', async (req, res) => {
  try {
    const jiraRes = await axios.get('https://jira.intranet.company.com/rest/agile/1.0/epic/key-18/issue', {
      headers: {
        "Content-Type": "application/json",
        'X-Atlassian-Token':'no-check',
        'Authorization': 'Basic myawesomebase64key',
      }
    });
    res.send(jiraRes.data);
  } catch (err) {
    res.status(err.response.status).send(err.response.data);
  }
});

app.listen(port, () => {
  console.log(`中转服务运行在 http://localhost:${port}`);
});

前端请求改为 http://localhost:3000/get-jira-issues 即可。

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