jQuery Ajax请求JIRA-TEMPO API遇跨域问题 求解决方案及PHP实现

首先得戳破一个关键误区：你在beforeSend里手动设置Access-Control-Allow-Origin: *完全没用。这个响应头必须由目标服务器（也就是JIRA-TEMPO那边）返回，前端请求里加这个头属于无效操作——这也是你之前查的方案没起作用的核心原因之一。

为什么Chrome插件ARC能正常请求？因为浏览器插件不受同源策略限制，它们有特殊权限可以跨域调用接口；而前端页面的Ajax请求严格受浏览器的同源策略约束，这就是两者的本质区别。

针对你的需求，用PHP做中间代理是非常靠谱的解决方案，下面直接给你落地步骤：

步骤1：编写PHP代理脚本（比如命名为jira-proxy.php） #

这个脚本会作为中间层，代替前端去请求JIRA-TEMPO的API，再把结果返回给你的页面——服务器端代码不受同源策略限制，完美绕开浏览器的跨域拦截。

<?php
// 允许你的前端域名跨域访问（生产环境建议替换成具体域名，比如http://your-frontend-domain.com）
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");

// 接收前端传递的日期参数（如果需要动态调整时间范围的话）
$dateFrom = $_GET['dateFrom'] ?? '2024-01-01';
$dateTo = $_GET['dateTo'] ?? '2024-01-31';

// 目标JIRA-TEMPO API地址
$apiUrl = "https://domain.atlassian.com/rest/tempo-timesheets/3/worklogs?dateFrom={$dateFrom}&dateTo={$dateTo}";

// JIRA账号信息（生产环境绝对不要硬编码！建议用环境变量存储，比如getenv('JIRA_USER')）
$username = 'your-jira-username';
$password = 'your-jira-password';
$authToken = base64_encode("{$username}:{$password}");

// 初始化cURL请求
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $apiUrl);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_HTTPHEADER, [
    "Authorization: Basic {$authToken}",
    "Content-Type: application/json"
]);

// 执行请求并处理响应
$response = curl_exec($curl);
$httpCode = curl_getinfo($curl, CURLINFO_HTTP_CODE);

if (curl_errno($curl)) {
    http_response_code(500);
    echo json_encode(['error' => curl_error($curl)]);
} else {
    http_response_code($httpCode);
    echo $response;
}

curl_close($curl);
?>

步骤2：修改前端Ajax代码，请求PHP代理脚本 #

把原来直接请求JIRA API的地址改成你的PHP代理脚本地址，同时传递必要的参数：

jQuery(document).ready(function () {
    $('.test').on('click', function () {
        $.ajax({
            method: 'GET',
            dataType: 'json',
            // 替换成你的PHP代理脚本的实际地址
            url: '/path/to/jira-proxy.php',
            // 传递时间参数给代理脚本
            data: {
                dateFrom: '2024-01-01',
                dateTo: '2024-01-31'
            }
        }).done(function (response) {
            console.log('请求成功：', response);
        }).fail(function (xhr) {
            console.log('请求失败，状态码：', xhr.status);
            console.log('错误详情：', xhr.responseText);
        });
    });
});

重要注意事项 #

• 安全优先：生产环境绝对不能把账号密码硬编码在PHP脚本里，建议用服务器环境变量（比如Nginx或Apache的环境配置）来存储敏感信息，避免泄露。
• 权限控制：可以在PHP脚本里添加额外验证逻辑，比如检查请求来源是否是你的前端域名，防止他人滥用代理接口。
• 参数校验：对前端传递的dateFrom和dateTo做格式校验，避免恶意或无效请求。

本质上，前端直接跨域请求JIRA API因为同源策略限制根本走不通，而通过PHP做中间代理，利用服务器端请求不受同源策略约束的特性，就能完美解决这个问题。

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