playframework 前后端分离跨域问题以及解决办法

最新推荐文章于 2024-10-07 21:13:37 发布

xiexiangyan

最新推荐文章于 2024-10-07 21:13:37 发布

阅读量1k

点赞数 2

分类专栏： Scala 前端

本文链接：https://blog.csdn.net/xiexiangyan/article/details/99860468

版权

前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

Scala

6 篇文章 0 订阅

订阅专栏

跨域

浏览器的同源策略限制默认情况下前端页面和后端服务在不同服务器（域名、端口不一样）时，前端页面js无法请求到后端接口服务，即存在跨域问题。（https://blog.csdn.net/weixin_37162010/article/details/80205352，具体的解决方法可以参考该博主的博文）。

本文介绍的是playframework +Scala框架下的跨域解决方法，先给出一个简单的登录界面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>login test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="ajax方式">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        function login() {
		var contentType ="application/x-www-form-urlencoded; charset=utf-8";
            $.ajax({
            //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "http://localhost:9000/auth/user/login" ,//url
                data: $('#form1').serialize(),
				
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result.resultCode == 200) {
                        alert("SUCCESS");
                    }
                    ;
                },
                error : function(e) {
					console.log(e);
                    alert("异常！");
                }
            });
        }
    </script>
</head>
<body>
<div id="form-div">
    <form id="form1" onsubmit="return false" action="##" method="post">
        <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
        <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
        <p><input type="button" value="登录" onclick="login()">&nbsp;<input type="reset" value="重置"></p>
    </form>
</div>
</body>
</html>

当访问的时候，会出现跨域问题，显示少了报头。

再查看network的http响应，确实缺少了报头

我采用的是直接滤器中添加报头

@Singleton
class ExampleFilter @Inject()(
    implicit override val mat: Materializer,
    exec: ExecutionContext) extends Filter {

  override def apply(nextFilter: RequestHeader => Future[Result])
           (requestHeader: RequestHeader): Future[Result] = {
    // Run the next filter in the chain. This will call other filters
    // and eventually call the action. Take the result and modify it
    // by adding a new header.
    nextFilter(requestHeader).map { result =>
      result.withHeaders("X-ExampleFilter" -> "foo")
      result.withHeaders("Access-Control-Allow-Origin" -> "*")    //增加http报头
    }
  }

}

可以看到已经可以访问该post请求

在查看network，可以看到http的响应报头已经完善。即解决了跨域问题

注：在实现这些之前，还需要在路由上增加+nocsrf，允许跨域（详情可参考https://www.jianshu.com/p/cd43b4c66541）
+nocsrf
POST    /user/login                           controllers.auth.AdminUserController.loginpost