[英]CORS Configuration Flask, Angular and NGINX
我正在尝试使用 nginx 将 angular 应用程序上传到数字海洋水滴。此应用程序在 flask 中使用 API。在本地一切正常,但在 VPS 上无法正常工作。 它说了一些关于Cross-origin request blocked: Same origin policy does not allow reading of remote resources at http://127.0.0.1:5001/api/talk/
这是我的 nginx 配置:
server {
server_name x.domain.com;
location / {
proxy_pass http://127.0.0.1:4200;
proxy_set_header Host x.domain.com;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Protocol $scheme;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Origin "";
add_header "Access-Control-Allow-Origin" "*";
add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD";
add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";
}
}
server {
location / {
proxy_pass http://127.0.0.1:5001;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Protocol $scheme;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Origin "";
add_header "Access-Control-Allow-Origin" "*";
add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD";
add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";
}
location /api/talk/ {
proxy_pass http://127.0.0.1:5001;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Protocol $scheme;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Origin "";
}
location /api/response/ {
proxy_pass http://127.0.0.1:5001;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Protocol $scheme;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Origin "";
}
}
这是我的 flask 配置:
app = Flask(__name__)
cors = CORS(app, resources={r"/api/*": {"origins": "*"}})
chat = Chat()
@app.route('/api/talk/', methods=['POST'])
@cross_origin(origin='localhost')
def index():
print(request.data.decode("utf-8"))
chat.send_message(request.data)
return request.data
@app.route('/api/response/', methods=['GET'])
@cross_origin(origin='localhost')
def get():
response = chat.response
return response
def options(self):
return {'Allow': 'POST'}, 200, \
{'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'POST,GET'}
if __name__ == '__main__':
app.run(host='127.0.0.1', port=5001, debug=True)
angular 在这里消耗 flask API:
export class Message {
constructor(public content: string, public sentBy: string){ }
}
@Injectable({
providedIn: "root",
})
export class MessageService {
conversation = new BehaviorSubject<Message[]>([]);
readonly SERVER_URL = "http://127.0.0.1:5001";
public httpClient = axios.create();
constructor(){}
update(msg: Message) {
this.conversation.next([msg]);
}
converse(msg: string) {
const userMessage = new Message(msg, 'user');
this.update(userMessage);
this.sendMessage(userMessage.content)
}
sendMessage(msg: string) {
console.log(msg)
const config = {
headers: {
'Content-Type': 'text/plain',
'Access-Control-Allow-Headers': 'Content-Type',
'Access-Control-Allow-Methods': 'GET POST',
'Access-Control-Allow-Origin': '*'
},
};
this.httpClient.post(this.SERVER_URL+'/api/talk/', btoa(msg), config)
.then(function (response) {
})
.catch(function (error) {
console.log(error);
});
}
async getResponse() {
await this.delay(900);
let msg = ''
return this.httpClient.get(this.SERVER_URL+'/api/response/')
.then(response => {
msg = response.data
const botMessage = new Message(msg, 'chucho');
this.update(botMessage);
return msg
})
.catch(function (error) {
console.log(error);
});
}
delay(ms: number) {
return new Promise( resolve => setTimeout(resolve, ms) );
}
}
我的 angular 应用程序运行在 4200 端口上,而 Flask API 运行在 5001 端口上。
希望您能够帮助我。
尝试像这样启用 CORS -
但首先通过运行安装最新的 flask-cors -
pip 安装-U flask-cors
from flask import Flask
from flask_cors import CORS, cross_origin
app = Flask(__name__)
cors = CORS(app) # This will enable CORS for all routes
@app.route("/")
@cross_origin()
def helloWorld():
return "Helloworld!"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.