Nuxt调用PHP接口在服务器创建JSON文件时遇CORS错误及文件写入失效求助

问题分析 #

从你的描述来看，核心是两个关联问题：

1. 当PHP脚本使用file_put_contents写入JSON文件时，前端触发CORS错误；但改用echo返回数据时请求完全正常
2. JSON文件实际并未被成功创建/写入

结合你的代码和Ubuntu 22.04环境，这大概率是PHP脚本语法错误+目录权限问题导致的（并非真的CORS问题，而是脚本执行失败后浏览器误判）。

具体解决方案 #

1. 修复PHP脚本的语法错误与响应逻辑

你的PHP代码存在两个致命问题：

• file_put_contents语句末尾缺少分号，直接触发语法错误导致脚本终止
• 写入文件后没有输出任何响应内容，前端useFetch因接收不到合法JSON响应触发异常

修改后的PHP脚本（增加错误处理、语法修复、合法响应输出）：

<?php
// 开发环境CORS配置（上线前请替换为具体域名，不要用*）
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS, DELETE, PUT');
header("Access-Control-Allow-Headers: origin, content-type, accept, x-requested-with");
header('Content-Type: application/json; charset=utf-8');

// 处理浏览器OPTIONS预检请求
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    exit();
}

$post_body = file_get_contents('php://input');
$post_body_decoded = json_decode($post_body, true);

$response_data = [
    'success' => true,
    'what_we_posted' => $post_body_decoded,
];

// 尝试写入文件并捕获错误
$file_path = 'myfile.json';
$write_result = file_put_contents($file_path, json_encode($response_data, JSON_PRETTY_PRINT));

// 处理文件写入失败的情况
if ($write_result === false) {
    $response_data['success'] = false;
    $response_data['error'] = '无法写入文件，请检查目录权限';
}

// 必须输出合法JSON响应，前端才能正常解析
echo json_encode($response_data);
exit();
?>

2. 解决Ubuntu下的目录权限问题

在Ubuntu中，PHP运行的用户需要拥有脚本所在目录的写入权限，分两种场景处理：

• 使用PHP内置服务器（php -S localhost:8000）：
  运行用户是当前登录用户，执行以下命令确保目录权限正常：

  # 临时开放目录写入权限（测试用）
  chmod 777 .
  # 更安全的方式：确保当前用户拥有目录所有权
  sudo chown $USER:$USER .
  

• 使用Apache/Nginx运行PHP：
  PHP运行用户为www-data，需要给目录添加该用户的写入权限：

  # 将目录所有者改为www-data
  sudo chown www-data:www-data .
  # 或者给组用户添加写入权限
  sudo chmod g+w .
  

3. 前端Nuxt代码的优化（增加错误捕获）

确保前端能正确处理异常情况，避免无意义的报错：

<script setup>
import { ref } from 'vue'

const formData = ref({
  name: '',
  email: '',
  message: ''
})

const submitForm = async () => {
  try {
    const { data: responseData } = await useFetch('http://localhost:8000/fetch.php', {
      method: 'post',
      body: {
        name: formData.value.name,
        email: formData.value.email,
        message: formData.value.message,
      },
      headers: {
        'Content-Type': 'application/json',
      }
    })

    if (responseData.value?.success) {
      console.log('提交并写入文件成功', responseData.value)
      // 这里可以添加表单重置等逻辑
    } else {
      console.error('提交失败', responseData.value?.error)
    }
  } catch (error) {
    console.error('请求异常', error)
  }
}
</script>

关键说明 #

• 你遇到的「CORS错误」是脚本执行失败的表象：PHP语法错误导致脚本中途终止，浏览器无法接收到预设的Access-Control-Allow-Origin响应头，从而误报CORS错误
• 无论文件写入成功与否，PHP脚本都必须输出合法的JSON响应，前端才能正确处理请求结果
• Ubuntu下的权限问题是文件写入失败的核心原因之一，一定要根据PHP的运行用户配置对应权限

备注：内容来源于stack exchange，提问作者grobian 666