JavascriptからPHPにJsonデータを送ろうとするとCORSエラーが発生する

前提

JavascriptからPHPへJsonデータを送信しようとして、Xamppを使ってPHPをURLにし、そのURLにJavascriptのFetchを用いてJsonデータを送信しようとしたときにCORSエラーが発生しました

実現したいこと

JavascriptからPHPに変数を送りたいです

エラーメッセージ
Access to fetch at 'http://localhost/test.php' from origin 'null' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

### 該当のソースコード

```PHP
<?php

header("Access-Control-Allow-Origin: *");

$data = json_decode(file_get_contents('php://input'), true);
$clean = array();

if( $data ) {
	foreach( $data as $key => $value ) {

		$clean[$key] = array();

		foreach( $value as $c_key => $c_value ) {
			$clean[$key][$c_key] = htmlspecialchars( $c_value, ENT_QUOTES);
		}
	}
};

var_dump($clean);
return;

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8</head>
9<body>
10    <script>
11        x = prompt("数字を入力")
12        y = prompt("数字を入力")
13
14        document.write(x,y)
15
16        let data = [
17		{
18			"x": "x",
19			"y": "y",
20		},
21    ]
22    fetch('http://localhost/test.php', {// 送信先URL
23		method: 'post', // 通信メソッド
24		headers: {
25			'Content-Type': 'application/json' // JSON形式のデータのヘッダー
26		},
27		body: JSON.stringify(data) // JSON形式のデータ
28	})
29	.then(response => response.text())
30	.then(data => {
31		console.log(data);
32	});
33    </script>
34    
35</body>
36</html>

試したこと

CORSエラーを解決させるためにヘッダーにheader("Access-Control-Allow-Origin: *");を追加しました

hoshi-takanori

2022/11/28 07:06

たぶん index.html を直接ファイルとしてブラウザで開いてるのでは？

行動規範の内容に同意します

回答1件

localhostからlocalhostを呼んでいるのですよね？特に問題ないとおもいますが

// test.php

php
1<?PHP
2var_dump($_POST);

// sample.html

javascript
1<script>
2const x = prompt("数字を入力");
3const y = prompt("数字を入力");
4const body=Object.entries({x,y}).reduce((xx,yy)=>(xx.append(...yy),xx),new FormData());
5fetch('test.php',{method: 'post',body})
6.then(response => response.text())
7.then(data => {
8  output.textContent=`${x}-${y}`;
9  console.log(data);
10});
11</script>
12<output id="output"></output>