我在从React向我的端点/send-email发出请求时遇到问题。我已将flask-mail配置为进行异步调用。
这是前端发出请求的方式：
emailClient(event, index){
let {clientCount} = this.state;
var headers = {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': true,
Authorization: `Bearer ${window.localStorage.authToken}`
}
const {userId} = this.props
const client = this.state.clients[index];
const data = {
client: client
};
const url = `${process.env.REACT_APP_WEB_SERVICE_URL}/send-email/${userId}`;
axios.post(url, data, {headers: headers})
.then((res) => {
this.setState({
clientCount: clientCount +1
});
console.log(data);
})
.catch((err) => {
});
};
渲染：
render() {
const orders = this.state.clients;
const { clients, youtube_urls, loadedVideosCount, currentPlayingIndex } = this.state;
return (
<div>
<h1 className="title is-1">Jukebox</h1>
{this.state.isLoading}
{
clients.map((client, index) => {
/*
Obtain preview from state.previews for current artist index
*/
const audio = youtube_urls[index]
/*
Render current client data, and corresponding audio url
*/
return(
<div key={index}>
<ul>
<li><font color="#C86428">Client: </font><strong><font color="#6f4e37"> { client.name } </font></strong></li>
<li><font color="#C86428">Phone: </font><strong><font color="#6f4e37"> { client.phone } </font></strong></li>
<li><font color="#C86428">Email: </font><strong><font color="#6f4e37"> { client.mail } </font></strong></li>
<li><font color="#C86428">Artist: </font><strong><font color="#6f4e37"> { client.tracks[0].artist } </font></strong></li>
<li><font color="#C86428">Track: </font><strong><font color="#6f4e37"> { client.tracks[0].title } </font></strong></li>
<ReactPlayer
url={ audio }
controls
width='50'
height='150'
onLoaded={() =>
this.setState(currentState => ({
loadedVideosCount: loadedVideosCount + 1,
currentPlayingIndex:
loadedVideosCount + 1 === youtube_urls.length ? 0 : -1,
}))
}
onStart={() => this.emailClient(index)} //<--------
onEnded={() =>
this.setState(currentState => ({
currentPlayingIndex: currentPlayingIndex + 1,
}))
}
playing={index === currentPlayingIndex}
/>
</ul></div>
)
})
}
</div>
)
};
};
export default Jukebox;
我遇到以下错误：
POST http://localhost/send-email/1 404 (Not Found)
端点：
@task_bp.route('/send-email/<user_id>', methods=['GET','POST'])
def send_email(user_id):
try:
#business logic
send_async_email.delay()
return jsonify(response_object), 200
except (exc.IntegrityError, ValueError):
db.session.rollback()
return jsonify(response_object), 400
nginx反向代理配置：
location /send-email {
proxy_pass http://web:5000;
proxy_redirect default;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
}
“网络”和“客户端”服务是使用docker-compose构建的：
services:
web:
build:
context: ./services/web
dockerfile: Dockerfile-dev
volumes:
- './services/web:/usr/src/app'
ports:
- 5001:5000
environment:
- FLASK_ENV=development
- APP_SETTINGS=project.config.DevelopmentConfig
- DATABASE_URL=postgres://postgres:postgres@web-db:5432/web_dev
- DATABASE_TEST_URL=postgres://postgres:postgres@web-db:5432/web_test
- SECRET_KEY=my_precious
- GOOGLE_APPLICATION_CREDENTIALS=/usr/src/app/project/api/resources/youtube/urls/z.json
depends_on:
- web-db
- redis
client:
build:
context: ./services/client
dockerfile: Dockerfile-dev
volumes:
- './services/client:/usr/src/app'
- '/usr/src/app/node_modules'
ports:
- 3000:3000
environment:
- NODE_ENV=development
- REACT_APP_WEB_SERVICE_URL=${REACT_APP_WEB_SERVICE_URL}
depends_on:
- web
每次构建它们时，我都会这样做：
$export REACT_APP_WEB_SERVICE_URL=http://localhost
可能出什么问题了？
注意：
如果我使用POSTMAN到http://localhost:5001/send-email/1直接发布到端点，则可以。
答案 0 :(得分：2)
在客户端5001后面添加端口localhost:为我修复了该问题：
const url = `${process.env.REACT_APP_WEB_SERVICE_URL}:5001/send-email/${userId}`;
控制台：
XHR finished loading: OPTIONS "http://localhost:5001/send-email/1".
我仍然不明白为什么，因为所有其他数十个端点都分配了5001，但这是固定的。任何明确原因的答案都会得到赏金。
答案 1 :(得分：1)
在Nginx前端Web服务器配置中，您设置了一个反向代理，以将请求/send-email传递给主机名为web的Web应用程序服务器，并在端口5000上监听。
location /send-email {
proxy_pass http://web:5000;
这意味着您可以直接请求/send-email/1。
您在问题中指出，在您的浏览器中执行了OPTIONS请求，并得到了404响应，而期望的是POST。
这样做的原因是，使用axios客户端执行的请求是一个预检请求。
对于preflight requests，浏览器首先向路径发出一个OPTIONS请求，以确定该请求是否可以安全发送。
许多特征确定预检请求，其中之一是Content-Type header的值是application/x-www-form-urlencoded | multipart/form-data | text/plain以外的值
响应OPTIONS请求以确认POST请求是安全的，必须具有Access-Control-Allow-*标头。例如，您的POST请求中的请求标头是：
Content-Type Authorization 要从服务器确认POST请求是安全的，OPTIONS请求的响应标头必须为
Access-Control-Allow-Origin: http://localhost
Access-Control-Allow-Methods: HEAD, OPTIONS, GET, POST
Access-Control-Allow-Headers: Authorization, Content-Type, Access-Control-Allow-Origin
Access-Control-Max-Age: 86400
您可以在Nginx配置中处理此预检响应。例如
location /send-email {
# ...
if ($request_method = OPTIONS) {
add_header 'Access-Control-Allow-Origin' 'http://localhost';
add_header 'Access-Control-Allow-Methods' 'HEAD, OPTIONS, GET, POST';
add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, Access-Control-Allow-Origin';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Max-Age' 86400;
return 204;
}
}
或者，您可以在视图函数中处理OPTIONS请求
from functools import wraps
def cors(f):
'''Handle preflight OPTIONS request'''
@wraps
def wrapper(*args, **kwargs):
if request.method != 'OPTIONS':
return make_response(f(*args, **kwargs))
response = current_app.make_default_options_response()
access_control_headers = {
'Access-Control-Allow-Origin': 'http://localhost',
'Access-Control-Allow-Methods': 'HEAD, OPTIONS, GET, POST',
'Access-Control-Max-Age': '86400',
'Access-Control-Allow-Credentials': 'true',
'Access-Control-Allow-Headers': 'Authorization, Content-Type, Access-Control-Allow-Origin',
}
response.headers.extend(access_control_headers)
return response
return wrapper
@cors
@task_bp.route('/send-email/<user_id>', methods=['GET','POST'])
def send_email(user_id):
# ...