如何从春季启动重定向/转发角度页面？

Posted 2023-02-26

【中文标题】如何从春季启动重定向/转发角度页面？

【英文标题】：How to redirect/forward angular page from spring boot?

【发布时间】：2019-06-01 19:53:17

【问题描述】：

我正在开发一个应用程序，其中 Angular 6 作为前端，spring boot 作为后端。在实现用户身份验证模块时，我想在登录后相应地重定向到学生和教职员工的家。

但是，我无法从 Spring Boot 重定向页面。使用 Redirect to an external URL from controller action in Spring MVC 这个解决方案我得到了 CORS 错误： “预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段内容类型。”

或者，如果有其他方法可以完成这项任务？

AuthenticationController.java

package sgsits.cse.dis.user.controller;

@CrossOrigin(origins = "*") // enables cross origin request
@RestController
@RequestMapping(value = "/dis")
@Api(value = "Authentication Resource")
public class AuthenticationController 

@Autowired
StudentRepository studRepo;
@Autowired
StaffRepository staffRepo;
@Autowired
EmailController email;

String pattern = "MM-dd-yyyy";
SimpleDateFormat simpleDateFormat = new SimpleDateFormat(pattern);

@ApiOperation(value = "login", response = Object.class, httpMethod = "POST", produces = "application/json")
@RequestMapping(value = "/login", method = RequestMethod.POST)
public String login(@RequestBody Authentication auth, HttpServletResponse httpServletResponse) 
    Optional<StaffProfile> staff = staffRepo.findByEmail(auth.getUsername());
    if (staff.isPresent()) 
        String md5_pass = MD5.getHash(auth.getPassword());
        if (staff.get().getPassword().equals(md5_pass)) 
            // set session
            // update last login

            return "forward:/localhost:4200/staff";
         else

            return "You have entered incorrect password";
     else 
        Optional<StudentProfile> student = studRepo.findByEnrollmentId(auth.getUsername());
        if (student.isPresent()) 
            String md5_pass = MD5.getHash(auth.getPassword());
            if (student.get().getPassword().equals(md5_pass)) 
                // set session
                // update last login

              httpServletResponse.setHeader("Location", "http://localhost:4200/reset-password");
              httpServletResponse.setStatus(302);
               return "redirect:localhost:4200/student";

             else
                return "You have entered incorrect password";
         else 
            return "You are not registered with the system. Please signup first";
        
    
  

【问题讨论】：

angular 是单页，不接受重定向到页面。因此，对于重定向到角度页面，您应该使用 rest api 发送请求，作为响应，您可以在模块之间进行路由。

【参考方案1】：

我观察到，当您从 Spring Boot 重定向到 Angular 页面时，错误“在预检响应中 Access-Control-Allow-Headers 不允许请求标头字段内容类型”意味着，Angular node.js server 未检测到 Angular 应用配置中的标头 Access-Control-Allow-Headers 中的字段内容类型。这里的重点是后端服务器和客户端应用程序的角色在此重定向中有点相反。

为了解决这个问题，我将按以下方式将 content-type 字段添加到 response 标头 Access-Control-Allow-Headers 中：

1. create file proxy.config.js just below the package.json file in your Angular project with this code:

module.exports = 
    "/": 
       "secure": false,
            "bypass": (req, res, proxyOptions) => 
             res.setHeader('Access-Control-Allow-Headers', "Content-Type");
         
    
;  

并通过添加以下行来修改 angular.json 文件：

"proxyConfig": "proxy.config.js" 

到这个位置：

projects >> client >> architect >> serve >> options 

此解决方案适用于我的情况。请注意，字段名称的首字母大写很重要。

【参考方案2】：

您为什么不返回正确的 API 响应和代码，根据您的响应和代码，您可以在前端重定向。

它使您的 API 完全 RESTFUL。我希望这会有所帮助。

【讨论】：

当 Angular 6 作为前端工作时，必须使用 Rest API。从Mail它将直接调用rest API并且该api不会以角度订阅

【参考方案3】：

不要给控制器添加@CrossOrigin(origins = "*")注解。

假设您的 api 在 8080 上运行，而您的角度代码在 4200 上运行。如果为真；

创建一个名为 proxy.conf.json 的文件

"/api/": 
    "target": "http://localhost:8080/",
    "secure": false,
    "changeOrigin": true

使用此命令启动 Angular 应用程序

ng 服务 --proxy-config proxy.conf.json

使用此配置，当您调用 localhost:4200/api 时，它将调用 8080，并且不会出现任何 CORS 错误

【讨论】：

嘿，我已经删除了@crossorigin 并添加了 proxy.conf.json，但我仍然收到 CORS 错误：从源 'localhost:4200' 访问 XMLHttpRequest 在 'localhost:8082/dis/login' 已经被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。