如何修复cors策略阻塞的Angular第三方API调用？
如何修复cors策略阻塞的Angular第三方API调用？
提问于 2021-01-02 14:49:35
我已经创建了一个简单的应用程序与第三方电子邮件发送api实现，以获得通过联系人表单的电子邮件。当我在本地主机或github页面上运行应用程序时，我收到以下错误：
Access to XMLHttpRequest at 'https://api.mailjet.com/v3.1/send' from origin 'https://myrepo.github.io' 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.这个问题的解决方案是什么？显然，我不能在API端应用任何解决方案，我所要做的就是使用我的angular代码。下面是我在http post请求中实现的内容：
sendMail(): Observable<any>{
let API_URL='https://api.mailjet.com/v3.1/send';
let data={
"Messages":[
{
"From": {
"Email": "myemail@gmail.com",
"Name": "My Name"
},
"To": [
{
"Email": "myemail@gmail.com",
"Name": "My Name"
}
],
"Subject": "My first Mailjet email",
"TextPart": "Greetings from Mailjet.",
"HTMLPart": "<h3>Dear passenger 1, welcome to <a href=https://www.mailjet.com/>Mailjet</a>!</h3><br />May the delivery force be with you!",
"CustomID": "AppGettingStartedTest"
}
]
};
console.log('sending email....')
console.log(data);
this.httpClient.post<any>(API_URL,data,{
headers: new HttpHeaders({
'Content-Type':'application/json',
'Authorization':'Basic VGIzOTIsasdasdasdasdasdrewetwfdsfasdasMjI0NWUVcDFGA='
})
}).subscribe(res=>{
console.log(res);
},err=>{
console.log(err);
});
return null;//ignoring this for now.
}回答 3
Stack Overflow用户
发布于 2021-01-02 21:34:59
你不能。你必须使用像PHP这样的服务器端实现，因为据我所知，你不能用mailjet通过客户端发送电子邮件。它也不安全，因为你必须在Angular应用程序中提到你的API密钥。想象一下，如果有人逆向设计你的Angular应用程序，并读取你的API密钥？通过Angular中的服务文件中的以下Typescript函数向PHP文件发送请求。确保还指定了它的URL。内容有三个属性:电子邮件、主题和消息。在将它们传递给sendEmail函数的参数之前，必须为它们赋值。
客户端实现
public sendEmail(content: object): Observable<any> {
return this.httpClient.post(this.SMTPURL, JSON.stringify(content));
}服务器端实现
<?php
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
function sanitizeEmail($email) {
return filter_var($email, FILTER_SANITIZE_EMAIL);
}
function sanitizeMessage($message) {
return filter_var($message, FILTER_SANITIZE_STRING);
}
function sanitizeSubject($subject) {
return filter_var($subject, FILTER_SANITIZE_STRING);
}
if($request->request) {
$to_email = sanitizeEmail($request->email);
$subject = sanitizeSubject($request->subject);
$message = sanitizeMessage($request->message);
mail($to_email, $subject, $message);
echo json_encode("Email was sent to " . $to_email . "\n " . $subject . "\n " . $message);
} else {
echo 'Unable to Handle the request';
}
?>Stack Overflow用户
发布于 2021-01-02 15:07:45
我认为你应该配置你的web服务器来代理它，或者使用配置Angular CLI代理来进行开发。
Stack Overflow用户
发布于 2021-01-02 16:42:30
根据this question的说法，最好有一个与您的API对话的服务器端函数。我不知道这是不是你的案子，但可能行得通
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65536683
复制相关文章
相似问题
腾讯云开发者
