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

清疚 2022-04-13 12:49 218阅读 0赞

一次开发，项目要求前后端分离，这种模式，会带来一些跨域的问题。首先，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;

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