我创建了一个简单的应用程序，该应用程序具有第三方电子邮件发送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端应用任何解决方案，我所要做的就是从我的角度代码。以下是我在http post-request 中实现的内容
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.
}
你不能。你必须使用像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';
}
?>
我认为您应该将web服务器配置为代理，或者使用Configure Angular CLI代理进行开发。
根据这个问题，最好有一个服务器端函数与您的API对话。我不知道这是不是你的情况，但它可以工作