teratail
回答率
85.37%
teratail 10th-anniversary
teratail 10th-anniversary
質問するログイン新規登録
トップに関する質問Herokuデプロイ後、axiosのリクエスト先がlocalhostのままになる

編集履歴

質問編集履歴

5

.gitignore追加

2021/01/03 08:13

投稿

CHAN_
CHAN_

スコア3

test CHANGED
File without changes
test CHANGED
@@ -185,3 +185,55 @@
185
185
  }
186
186
 
187
187
  ```
188
+
189
+ ↓.gitignore
190
+
191
+ ```
192
+
193
+ # dependencies
194
+
195
+ /node_modules
196
+
197
+ /.pnp
198
+
199
+ .pnp.js
200
+
201
+
202
+
203
+ # testing
204
+
205
+ /coverage
206
+
207
+
208
+
209
+ # production
210
+
211
+
212
+
213
+ # misc
214
+
215
+ .DS_Store
216
+
217
+ .env.local
218
+
219
+ .env.development.local
220
+
221
+ .env.test.local
222
+
223
+ .env.production.local
224
+
225
+
226
+
227
+ npm-debug.log*
228
+
229
+ yarn-debug.log*
230
+
231
+ yarn-error.log*
232
+
233
+
234
+
235
+ .env.development
236
+
237
+ .env.production
238
+
239
+ ```

4

全文更新

2021/01/03 08:12

投稿

CHAN_
CHAN_

スコア3

test CHANGED
File without changes
test CHANGED
@@ -2,15 +2,17 @@
2
2
 
3
3
  バックをDjango、フロントをReactでアプリケーションを作成しHerokuにデプロイしました。
4
4
 
5
- axiosを使用してバックからAPIデータを取得してきているのですが、axios に指定するURLをlocalhostのものではなく、デプロイ後のURLに変更したのですが、リクエスト先がlocalhostのままでエラーになってしまいます。
5
+ axiosを使用してバックからAPIデータを取得しています。
6
6
 
7
- ~~ローカルではちゃんとデプロイ後のURLにデータを取りに行っています。~~
8
-
9
- ローカルでもエラーが発生しました。が、URLはデプロイ後のURLとなっています。（エラー文は下記）
7
+ axiosに指定するURLを```.env.development```にlocalhostのURLを、```.env.production```にデプロイ後のURLを記載してビルド時に切り替える様に設定しました。
10
8
 
11
9
 
12
10
 
11
+ ですが、ローカル環境ではlocalhostのURLにリクエストを送っているものの、本番環境ではデプロイ後のURLにリクエストを送ってくれません。(localhostのURLにリクエストを送っていてエラーになっています)
12
+
13
+
14
+
13
- 解決策が見つからず困っております。
15
+ 様々なwebサイトを参照して色々と検証したものの、解決策が見つからず困っております。
14
16
 
15
17
  解答の為に必要な情報が他にあれば教えてください。
16
18
 
@@ -24,11 +26,9 @@
24
26
 
25
27
 
26
28
 
27
- axios のURLを修正後、npm run buildを実行してmain.jsの内容を更新しました。
29
+ 本番環境のURLをそのままaxiosに指定してみましたがlocalhostのままでした。
28
30
 
29
31
 
30
-
31
- **追記**
32
32
 
33
33
  axiosで指定するURLを```window.location.origin+'/api/entry/'```としてみましたが、やはりローカル環境ではうまくいくものの本番環境ではリクエスト先がlocalhostのままでした。
34
34
 
@@ -36,45 +36,21 @@
36
36
 
37
37
  ### 発生している問題・エラーメッセージ
38
38
 
39
- 本番環境のエラー文↓
39
+
40
40
 
41
41
  ```
42
42
 
43
- Access to XMLHttpRequest at 'http://localhost:8000/api/entry/'
43
+ GET http://localhost:8000/api/task/
44
44
 
45
- from origin 'https://hoge.herokuapp.com' has been blocked
46
-
47
- by CORS policy: Response to preflight request doesn't pass access
48
-
49
- control check: No 'Access-Control-Allow-Origin' header is present
50
-
51
- on the requested resource.
45
+ net::ERR_CONNECTION_REFUSED
52
46
 
53
47
 
54
48
 
55
- POST http://localhost:8000/api/entry/
49
+ Uncaught (in promise) Error: Network Error
56
50
 
57
- net::ERR_CONNECTION_REFUSED
51
+ at e.exports (main.776647e88695.js:2)
58
52
 
59
- ```
60
-
61
- ローカル環境のエラー文↓
62
-
63
- ```
64
-
65
- Access to XMLHttpRequest at 'https://hoge.herokuapp.com/api/entry/'
66
-
67
- from origin 'http://127.0.0.1:8000' has been blocked by CORS policy:
68
-
69
- Response to preflight request doesn't pass access control check: No
53
+ at XMLHttpRequest.p.onerror (main.776647e88695.js:2)
70
-
71
- 'Access-Control-Allow-Origin' header is present on the requested resource.
72
-
73
-
74
-
75
- POST https://hoge.heroku.com/api/entry/
76
-
77
- net::ERR_FAILED
78
54
 
79
55
  ```
80
56
 
@@ -82,28 +58,130 @@
82
58
 
83
59
  ### 該当ソースコード
84
60
 
61
+ ↓.env.development
85
62
 
63
+ ```
86
64
 
87
- 下記コードはPOSTのコードになっております。
65
+ REACT_APP_API_URL=http://localhost:8000
88
66
 
89
67
 
90
68
 
69
+ ```
70
+
71
+ ↓.env.production
72
+
73
+ ```
74
+
75
+ REACT_APP_API_URL=https://hoge.herokuapp.com
76
+
77
+ ```
78
+
79
+ ↓webpack.config.development.js
80
+
81
+ ```
82
+
83
+ const path = require('path');
84
+
85
+ const Dotenv = require('dotenv-webpack');
86
+
87
+
88
+
89
+ module.exports = {
90
+
91
+ =省略=
92
+
93
+ plugins: [
94
+
95
+ new Dotenv({
96
+
97
+ path: path.resolve(__dirname, './.env.development')
98
+
99
+ })
100
+
101
+ ]
102
+
103
+ } 
104
+
105
+
106
+
107
+ ```
108
+
109
+ ↓webpack.config.js
110
+
111
+ ```
112
+
113
+ const path = require('path');
114
+
115
+ const Dotenv = require('dotenv-webpack');
116
+
117
+
118
+
119
+ module.exports = {
120
+
121
+ =省略=
122
+
123
+ plugins: [
124
+
125
+ new Dotenv({
126
+
127
+ path: path.resolve(__dirname, './.env.production')
128
+
129
+ })
130
+
131
+ ]
132
+
133
+ } 
134
+
135
+ ```
136
+
137
+ ↓package.json
138
+
139
+ ```
140
+
141
+ {
142
+
143
+ =省略=
144
+
145
+ "scripts": {
146
+
147
+ "start": "react-scripts start",
148
+
149
+ "test": "react-scripts test",
150
+
151
+ "eject": "react-scripts eject",
152
+
153
+ "build": "webpack --env production --config webpack.config.js",
154
+
155
+ "dev": "webpack --env development --config webpack.config.development.js"
156
+
157
+ }
158
+
159
+ =省略=
160
+
161
+ }
162
+
163
+ ```
164
+
165
+ ↓axios.getのコード
166
+
91
167
  ```React
92
168
 
93
- axios.post('https://hoge.heroku.com/api/entry/', data)
169
+ apiGet = async () => {
94
170
 
95
- .then((res) => {
171
+ const API_URL = process.env.REACT_APP_API_URL
96
172
 
97
- this.props.history.push('/todo');
173
+ try{
98
174
 
99
- })
175
+ const res = await axios.get(`${API_URL}/api/task/`);
100
176
 
101
- .catch(error => {
177
+ this.setState({ posts: res.data });
102
178
 
103
- console.log(error.response)
179
+ }catch(error){
104
180
 
105
- return this.errorAlert(error)
181
+ console.log(error.response)
106
182
 
107
- });
183
+ }
184
+
185
+ }
108
186
 
109
187
  ```

3

追記

2021/01/02 17:37

投稿

CHAN_
CHAN_

スコア3

test CHANGED
@@ -1 +1 @@
1
- Herokuデプロイ後、axios リクエスト先が変わらない
1
+ Herokuデプロイ後、axiosのリクエスト先がlocalhostのままになる
test CHANGED
@@ -28,7 +28,9 @@
28
28
 
29
29
 
30
30
 
31
- 下記コードはPOSTのコードになっております。
31
+ **追記**
32
+
33
+ axiosで指定するURLを```window.location.origin+'/api/entry/'```としてみましたが、やはりローカル環境ではうまくいくものの本番環境ではリクエスト先がlocalhostのままでした。
32
34
 
33
35
 
34
36
 
@@ -78,7 +80,11 @@
78
80
 
79
81
 
80
82
 
81
- ### 該当
83
+ ### 該当ソースコード
84
+
85
+
86
+
87
+ 下記コードはPOSTのコードになっております。
82
88
 
83
89
 
84
90
 

2

エラー文変更

2021/01/01 18:16

投稿

CHAN_
CHAN_

スコア3

test CHANGED
File without changes
test CHANGED
@@ -38,6 +38,18 @@
38
38
 
39
39
  ```
40
40
 
41
+ Access to XMLHttpRequest at 'http://localhost:8000/api/entry/'
42
+
43
+ from origin 'https://hoge.herokuapp.com' has been blocked
44
+
45
+ by CORS policy: Response to preflight request doesn't pass access
46
+
47
+ control check: No 'Access-Control-Allow-Origin' header is present
48
+
49
+ on the requested resource.
50
+
51
+
52
+
41
53
  POST http://localhost:8000/api/entry/
42
54
 
43
55
  net::ERR_CONNECTION_REFUSED
@@ -47,6 +59,16 @@
47
59
  ローカル環境のエラー文↓
48
60
 
49
61
  ```
62
+
63
+ Access to XMLHttpRequest at 'https://hoge.herokuapp.com/api/entry/'
64
+
65
+ from origin 'http://127.0.0.1:8000' has been blocked by CORS policy:
66
+
67
+ Response to preflight request doesn't pass access control check: No
68
+
69
+ 'Access-Control-Allow-Origin' header is present on the requested resource.
70
+
71
+
50
72
 
51
73
  POST https://hoge.heroku.com/api/entry/
52
74
 

1

ローカルのエラーを記載

2020/12/31 17:30

投稿

CHAN_
CHAN_

スコア3

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,9 @@
4
4
 
5
5
  axiosを使用してバックからAPIデータを取得してきているのですが、axios に指定するURLをlocalhostのものではなく、デプロイ後のURLに変更したのですが、リクエスト先がlocalhostのままでエラーになってしまいます。
6
6
 
7
- ローカルではちゃんとデプロイ後のURLにデータを取りに行っています。
7
+ ~~ローカルではちゃんとデプロイ後のURLにデータを取りに行っています。~~
8
+
9
+ ローカルでもエラーが発生しました。が、URLはデプロイ後のURLとなっています。（エラー文は下記）
8
10
 
9
11
 
10
12
 
@@ -32,13 +34,23 @@
32
34
 
33
35
  ### 発生している問題・エラーメッセージ
34
36
 
35
-
37
+ 本番環境のエラー文↓
36
38
 
37
39
  ```
38
40
 
39
41
  POST http://localhost:8000/api/entry/
40
42
 
41
43
  net::ERR_CONNECTION_REFUSED
44
+
45
+ ```
46
+
47
+ ローカル環境のエラー文↓
48
+
49
+ ```
50
+
51
+ POST https://hoge.heroku.com/api/entry/
52
+
53
+ net::ERR_FAILED
42
54
 
43
55
  ```
44
56
 
@@ -50,7 +62,7 @@
50
62
 
51
63
  ```React
52
64
 
53
- axios.post('https://hoge.com/api/entry/', data)
65
+ axios.post('https://hoge.heroku.com/api/entry/', data)
54
66
 
55
67
  .then((res) => {
56
68