web开发前后端分离带来的跨域问题

一次开发，项目要求前后端分离，这种模式，会带来一些跨域的问题。首先，jsp,freemarker等等服务端模板都没法用了，所有的请求必须是通过ajax来完成，ajax跨域，有一种解决办法，就是通过jsonp的方式，但是这种方式，只适合get请求，对于post请求，就爱莫能助了，还得前后端配合，前端使用ajax，后端增加跨域配置：

一、跨域问题：

Failed to load http://10.119.9.167:8080/login: No 'Access-Control-Allow-Origin' header is 
present on the requested resource. Origin 'http://10.119.9.167' is therefore not allowed 
access. The response had HTTP status code 405.

这种问题，就是由于服务端，默认不接收来自本服务器和端口以外的请求（http schema协议不同，host不同，port不同），这里如果前端页面和ajax请求还在本机上，只是端口不一样，那么服务端SpringBoot可以做如下修改：

package com.xxx.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
@Configuration
public class WebMvcConfiguration extends WebMvcConfigurationSupport{
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET","POST","DELETE","PATCH")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

在这个配置中，设置了接收所有外部host的请求，包括GET,POST,DELETE,PATCH请求。

二、 还是跨域问题：

Blocked a frame with origin "http://10.119.9.167" from accessing a cross-origin frame.

这里需要通过nginx来做一个反向代理，将我们的静态页面页面，部署到nginx->html目录下，服务端请求需要做一个反向代理：

location  \.(html|json)$ {
    root   html/webapp;
    index  index.html index.htm;
}

location ~ /webserver {
    proxy_pass   http://127.0.0.1:8080;
}

这种配置就利用nginx把两个不同域的请求，整合到了一个域，前端页面在nginx->html->webapp目录下 ，页面上http://127.0.0.1/webserver/xxx的请求就会转到我们的服务器端的8080上。

nginx实现了动静分离，服务端只需提供restful接口。

三、跨域涉及到的session问题：

前面两个步骤，解决了跨域接口请求的问题，如果前后端涉及到登录，而且有权限控制，那么在登录之后，不同域之间，默认是不会带上cookie的，如果登录成功，我们接下来请求的时候，还是会遇到403或者405的错误，那么就是我们的ajax请求默认没有带上cookie，解决办法就是加上一个参数：xhrFields:{withCredentials:true}，如下所示：

$.ajax({
  url:config.url +"/model/"+id,
  type:'get',
  data:{},
  xhrFields:{withCredentials:true},
  success:function(data){
	  //填充表单
	  if(data){
		  $("#ff").form("load",data);
	  }   
  },
  error:function(){

  }
});

如果使用的angulerjs，那么需要作出如下配置：

$httpProvider.defaults.withCredentials = true; 

经过这三个步骤，前后端分离带来的跨域问题就彻底解决了。