首页 > 解决方案 > 在 springboot 邮件 API 中启用 CORS

问题描述

我有简单的邮件发送 springboot API 和 reactjs 应用程序来获取。托管在 nginx 服务器中。React 应用程序在 localhost 上运行良好,电子邮件可以正常工作,但如果我在服务器上运行,则会出现错误。

我尝试添加不同的 Nginx 服务器设置并添加 Springboot @CrossOrigin(origins = "http://xx.xxx.xxx.xxx/"),但到目前为止还没有找到任何帮助。如果我部署到服务器,我必须在哪里允许 CORS?

Nginx 服务器默认:

server {
   listen 80 default_server;
   root /var/www/name/build;
   server_name xx.xxx.xxx.xxx;
   index index.html index.htm;
   location /  {
    }
}

弹簧靴:

@PostMapping
public void sendFeedback(@RequestBody Feedback feedback,
                         BindingResult bindingResult){
    if(bindingResult.hasErrors()){
        throw new ValidationException("Feedback is not valid");
    }

    // Create a mail sender
    JavaMailSenderImpl mailSender = new JavaMailSenderImpl();
    Properties props = mailSender.getJavaMailProperties();
    mailSender.setHost(this.emailCfg.getHost());
    mailSender.setPort(this.emailCfg.getPort());
    mailSender.setUsername(this.emailCfg.getUsername());
    mailSender.setPassword(this.emailCfg.getPassword());

    // Create an email instance
    SimpleMailMessage mailMessage = new SimpleMailMessage();
    mailMessage.setFrom(feedback.getEmail());
    mailMessage.setTo("test@gmail.com");
    mailMessage.setSubject("Testing mail");
    mailMessage.setText(feedback.getFeedback());
    mailSender.send(mailMessage);
}

我有 Reactjs 代码:

fetch(url,{
    method: 'POST',
    headers:{
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(state)
}).then(response =>{
    console.log(data)
}).catch(error =>{
    console.log(error)
})

输出:

Access to fetch at 'http://xx.xxx.xxx.xxx:8080/feedback-0.0.1-SNAPSHOT' from 
origin 'http://xx.xxx.xxx.xxx' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
Redirect is not allowed for a preflight request.

标签: reactjsspring-bootnginx

解决方案


这是由于您的服务器未使用正确的标头响应造成的。如果您查看您的网络选项卡,您将看到并OPTIONS请求在您的请求之前触发POST。您的服务器需要响应该OPTIONS请求,让浏览器知道请求客户端可以访问资源。您可以在 MDN上阅读有关它的更多信息,但至少您的服务器应该使用以下标头响应预检:

Access-Control-Allow-Origin: http://foo.example <== your domain here
Access-Control-Allow-Methods: POST, OPTIONS
Access-Control-Allow-Headers: Content-Type

推荐阅读