teratail
回答率
85.48%
質問するログイン新規登録
トップaxiosに関する質問No 'Access-Control-Allow-Origin' header is present on the requested resource

編集履歴

質問編集履歴

6

tweak

2022/05/17 06:14

投稿

reactq
reactq

スコア51

test CHANGED
File without changes
test CHANGED
@@ -1,28 +1 @@
1
- # エラー内容
2
- ```
3
- Access to XMLHttpRequest at 'https://stg-example.jp/hoge' from origin 'http://localhost:3000' 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.
4
- ```
5
-
6
- # 質問内容
7
- axiosでgetリクエストをしようとしたところ、上記のようなエラーが出ました
8
- ```ts:api.ts
9
- import axios from "axios";
10
-
11
- const client = axios.create({baseURL: "https://stg-example.jp"});
12
-
13
- function getData() {
14
- client.get("/hoge");
15
- }
16
- ```
17
-
18
- エラーの内容的に`headers`を付け加えれば良いのかと思い、
19
- ```ts
20
- const client = axios.create({
21
- baseURL: "https://stg-example.jp",
22
- headers: {
23
- 'Access-Control-Allow-Origin': '*',
24
- }
25
- });
26
- ```
27
- としてみたのですが変わらず、他にも`withCredentials`など他のパラメータを追加してみたりしたのですが解決せず詰まっています
28
- 解決方法をご存知の方がいらっしゃいましたら教えていただきたいです🙇‍♀️
1
+ No 'Access-Control-Allow-Origin' header is present on the requested resource
axiosTypeScript

5

tweak

2022/05/17 04:25

投稿

reactq
reactq

スコア51

test CHANGED
File without changes
test CHANGED
@@ -8,28 +8,17 @@
8
8
  ```ts:api.ts
9
9
  import axios from "axios";
10
10
 
11
- const client = axios.create({
12
- baseURL: "https://stg-example.jp",
11
+ const client = axios.create({baseURL: "https://stg-example.jp"});
13
- auth: {
14
- username: "username",
15
- password: "password",
16
- },
17
- });
18
12
 
19
13
  function getData() {
20
14
  client.get("/hoge");
21
15
  }
22
16
  ```
23
- ※ Basic認証(`username:password`)が合っていることは確認済みです
24
17
 
25
18
  エラーの内容的に`headers`を付け加えれば良いのかと思い、
26
19
  ```ts
27
20
  const client = axios.create({
28
21
  baseURL: "https://stg-example.jp",
29
- auth: {
30
- username: "username",
31
- password: "password",
32
- },
33
22
  headers: {
34
23
  'Access-Control-Allow-Origin': '*',
35
24
  }
axiosTypeScript

4

まとめた

2022/05/16 11:57

投稿

reactq
reactq

スコア51

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,7 @@
4
4
  ```
5
5
 
6
6
  # 質問内容
7
- Basic認証がかかっているものに対してgetリクエストをしようとしたところ、上記のようなエラーが出ました
7
+ axiosでgetリクエストをしようとしたところ、上記のようなエラーが出ました
8
8
  ```ts:api.ts
9
9
  import axios from "axios";
10
10
 
@@ -16,7 +16,7 @@
16
16
  },
17
17
  });
18
18
 
19
- export async function getData() {
19
+ function getData() {
20
20
  client.get("/hoge");
21
21
  }
22
22
  ```
@@ -37,6 +37,3 @@
37
37
  ```
38
38
  としてみたのですが変わらず、他にも`withCredentials`など他のパラメータを追加してみたりしたのですが解決せず詰まっています
39
39
  解決方法をご存知の方がいらっしゃいましたら教えていただきたいです🙇‍♀️
40
-
41
- # 追記
42
- Basic認証が必要なSTGのパス(`https://stg-example.jp`)に対してはエラーが出ますが、本番のパス(`https://example.jp`)に対してgetする分にはエラーは出ません
axiosTypeScript
JavaScriptReact.js

3

tweak

2022/05/15 04:38

投稿

reactq
reactq

スコア51

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  # エラー内容
2
2
  ```
3
- Access to XMLHttpRequest at 'https://example.jp/hoge' from origin 'http://localhost:3000' 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.
3
+ Access to XMLHttpRequest at 'https://stg-example.jp/hoge' from origin 'http://localhost:3000' 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.
4
4
  ```
5
5
 
6
6
  # 質問内容
axiosJavaScriptTypeScriptReact.js

2

追記

2022/05/15 04:38

投稿

reactq
reactq

スコア51

test CHANGED
File without changes
test CHANGED
@@ -9,7 +9,7 @@
9
9
  import axios from "axios";
10
10
 
11
11
  const client = axios.create({
12
- baseURL: "https://example.jp",
12
+ baseURL: "https://stg-example.jp",
13
13
  auth: {
14
14
  username: "username",
15
15
  password: "password",
@@ -25,7 +25,7 @@
25
25
  エラーの内容的に`headers`を付け加えれば良いのかと思い、
26
26
  ```ts
27
27
  const client = axios.create({
28
- baseURL: "https://example.jp",
28
+ baseURL: "https://stg-example.jp",
29
29
  auth: {
30
30
  username: "username",
31
31
  password: "password",
@@ -37,3 +37,6 @@
37
37
  ```
38
38
  としてみたのですが変わらず、他にも`withCredentials`など他のパラメータを追加してみたりしたのですが解決せず詰まっています
39
39
  解決方法をご存知の方がいらっしゃいましたら教えていただきたいです🙇‍♀️
40
+
41
+ # 追記
42
+ Basic認証が必要なSTGのパス(`https://stg-example.jp`)に対してはエラーが出ますが、本番のパス(`https://example.jp`)に対してgetする分にはエラーは出ません
axiosJavaScriptTypeScriptReact.js

1

試したことを追加

2022/05/14 14:36

投稿

reactq
reactq

スコア51

test CHANGED
File without changes
test CHANGED
@@ -22,4 +22,18 @@
22
22
  ```
23
23
  ※ Basic認証(`username:password`)が合っていることは確認済みです
24
24
 
25
+ エラーの内容的に`headers`を付け加えれば良いのかと思い、
26
+ ```ts
27
+ const client = axios.create({
28
+ baseURL: "https://example.jp",
29
+ auth: {
30
+ username: "username",
31
+ password: "password",
32
+ },
33
+ headers: {
34
+ 'Access-Control-Allow-Origin': '*',
35
+ }
36
+ });
37
+ ```
25
- `withCredentials`など他のパラメータを追加してみたりしたのですが解決せず、解決方法をご存知の方がいらっしゃいましたら教えていただきたいです🙇‍♀️
38
+ としてみたのですが変わらず、他にも`withCredentials`など他のパラメータを追加してみたりしたのですが解決せず詰まっています
39
+ 解決方法をご存知の方がいらっしゃいましたら教えていただきたいです🙇‍♀️
axiosJavaScriptTypeScriptReact.js