reactjs 交叉阻止请求

h7wcgrx3  于 2023-01-25  发布在  React
关注(0)|答案(1)|浏览(132)

我正在使用react作为前端和php作为后端,前端以前我是在aws放大上传和后端上传的lightsail,然而由于放大是https,但lightsail是http api,这不会让我传递信息,所以我改为aws s3作为前端,每个功能都工作正常,但只有更新功能会显示错误
CORS策略已阻止从源"http://www.example.com"访问位于"http://3.222.98.25/api/Update.php"的XMLHttpRequest:post-fetch-api.s3-website-ap-southeast-2.amazonaws.com请求的资源上不存在"Access-Control-Allow-Origin"标头。 Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
有人知道原因吗?我把每一个cors功能,我可以在更新文件,是工程在本地环境,但不是在线环境

//this is php update page

<?php 
// if request is OPTIONS, disconnect
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: POST, GET, DELETE, PUT, PATCH, OPTIONS');
    header('Access-Control-Allow-Headers: token, Content-Type');
    header('Access-Control-Max-Age: 1728000');
    header('Content-Length: 0');
    header('Content-Type: text/plain');
    die();
}
 
 // Headers
  header('Access-Control-Allow-Origin: *');
  header('Content-Type: application/json');
 header('Access-Control-Allow-Methods: POST, GET, DELETE, PUT, PATCH, OPTIONS');
  header('Access-Control-Allow-Headers: Access-Control-Allow-Headers,Content-Type,Access-Control-Allow-Methods, Authorization, X-Requested-With');

  include_once '../config/Database.php';
  include_once '../models/Post.php';

  // Instantiate DB & connect
  $database = new Database();
  $db = $database->connect();

  // Instantiate blog post object
  $post = new Post($db);

  // Get raw posted data
  $data = json_decode(file_get_contents("php://input"));

  // Set ID to update
  $post->id = $data->id;

  $post->title = $data->title;
  $post->body = $data->body;
  

  // Update post
  if($post->update()) {
    echo json_encode(
      array('message' => 'Post Updated')
    );
  } else {
    echo json_encode(
      array('message' => 'Post Not Updated')
    );
  }
// here is react update page

import { useState, useEffect } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import { useNavigate, useParams } from "react-router-dom";

export default function Update() {
  const [inputs, setInputs] = useState({});
  //const[post,setPost]=useState({});
  const navigate = useNavigate();
  const { id } = useParams();
  useEffect(() => {
    getSinglePost();
  }, []);

  function getSinglePost() {
    axios
      .get(`http://3.222.98.25/api/read_single.php?id=${id}`)
      .then((res) => {
        console.log(res.data);
        setInputs(res.data);
      })
      .catch((err) => console.log(err));
  }
  const handleChange = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    setInputs((values) => ({ ...values, [name]: value }));
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    axios
      .put("http://3.222.98.25/api/Update.php", inputs)
      .then((response) => {
        console.log(response.data);
        navigate("/read");
      })
      .catch((err) => console.log(err));
  };
  return (
    <div>
      <Link to="/">Show Posts</Link>
      <h1 style={{ marginTop: "150px" }}>Update a post</h1>
      <form onSubmit={handleSubmit}>
        <div className="marginBottom">
          <label className="marginRight">Title:</label>
          <input
            type="text"
            value={inputs.title}
            name="title"
            onChange={handleChange}
            required
          ></input>
        </div>
        <div className="marginBottom bodyCenter">
          <label className="marginRight">Body:</label>
          <textarea
            style={{ height: "50px" }}
            type="text"
            name="body"
            value={inputs.body}
            onChange={handleChange}
            required
          ></textarea>
        </div>
        <button>update</button>
      </form>
    </div>
  );
}
nqwrtyyt

nqwrtyyt1#

跨源请求(CORS)是一种由在一个域上运行的Web应用程序向另一个域上的资源发出的请求。默认情况下,Web浏览器会阻止这种类型的请求,作为一种安全措施,以防止跨站点脚本(XSS)攻击。
要在PHP中启用跨源请求,您可以在服务器响应中添加适当的标头。您需要设置的标头取决于您发出的请求类型。
例如,如果要从Web页面向PHP服务器发出简单请求(GET、HEAD或POST),则需要设置以下头:

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, HEAD, POST");

第一行允许任何域访问资源,而第二行指定服务器将只接受GET、HEAD和POST请求。
如果您正在进行印前检查请求(OPTIONS),您还需要设置以下标题:

header("Access-Control-Allow-Headers: Content-Type");
header("Access-Control-Max-Age: 86400");

第一行指定在实际请求中允许哪些标头,第二行指定浏览器缓存印前检查请求的时间(以秒为单位)。
此外,您还可以设置Access-Control-Allow-Credentials标头以允许凭据(cookie等)随请求沿着发送。

header("Access-Control-Allow-Credentials: true");

请注意,应该在从服务器发送任何其他输出之前设置这些标头,并且这些示例是针对简单情况的,可能需要进行调整以适合您的特定用例。
您需要将withCredentials属性设置为true,并在服务器上设置Access-Control-Allow-Origin头,以允许您的Web页面的域访问资源。
以下示例说明了如何使用**'XMLHttpRequest'**对象发出CORS GET请求:

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/resource", true);
xhr.withCredentials = true;
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

相关问题