跨域对接方法总结

一、后台跨域-V1

1. 后台设置

  1. 配置过滤器,为所有的响应头都加上 下面四个字段
  • Access-Control-Allow-Origin: '具体源' :允许通过跨域访问后台服务器的源。如果需要使用section来标示不同的会话,则需要前端设置允许cookie(因为浏览器是通过发送cookie中相关的ID ( JSESSIONID )来标识的),并且后台的 Access-Control-Allow-Origin 不可以设置为通配符 ‘ * ’,需要指定一个明确的域名,可以是 null (即通过本地文件 file:// 发送的请求), 然后后台动态的获取request 的 origin 去设置 Access-Control-Allow-Origin 。

  • Access-Control-Allow-Methods: "POST, ..." :该字段是必须的,用来列出浏览器的CORS请求会用到哪些HTTP方法

  • Access-Control-Allow-Headers: "Content-Type, ...":该字段是一个逗号分隔的字符串,指定浏览器CORS请求会额外发送的头信息字段

  • Access-Control-Max-Age: '3600':规定在多长时间内不需要再发生 预检请求 就能跨域访问

// spring 写法

package gdut.qg.utils;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
* Created by logan on 2017/5/23.
*/
public class CORSFilter implements Filter {
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;
        String Origin = request.getHeader("Origin");
    /* 此处通过动态设置运行跨域访问的源 */
        response.setHeader("Access-Control-Allow-Origin", Origin);
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "36000");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.addHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        chain.doFilter(req, res);
        
    }
    public void init(FilterConfig filterConfig) {}
    public void destroy() {}
}

2. 前端设置

  1. 如果需要保持将两次请求维持在同一个会话中(即后台需要用到 session 来识别用户),需要保持Request Cookies 中的 JSESSIONID 的值在两次请求中不变,即需要在请求时允许跨域请求携带 Cookie
  • 原生
//原生

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.withCredentials = true;      //允许跨域请求携带 Cookie
xhr.send();
  • jQuery
// jQuery

$.ajax({
    type: "post",
    url: "xxx",
    data: data,
    xhrFields: {
        withCredentials: true       //允许跨域请求携带 Cookie
    }
    success: function(data) {
        console.log(data)
    },
});

二、后台跨域-V2

1. 后台设置

  1. 配置过滤器,为所有的响应头都加上 下面的字段
  • Access-Control-Allow-Origin: ' * ' :允许通过跨域访问后台服务器的源,如果设置为 * ,表示可以让任何源访问,当是这里需要再设置一个参数 Access-Control-Allow-Credentials 为 false,表明不允许携带 cookie 才可以

  • Access-Control-Allow-Methods: "POST, ..." :该字段是必须的,用来列出浏览器的CORS请求会用到哪些HTTP方法

  • Access-Control-Allow-Headers: "Content-Type, ...":该字段是一个逗号分隔的字符串,指定浏览器CORS请求会额外发送的头信息字段

  • Access-Control-Max-Age: '3600':规定在多长时间内不需要再发生 预检请求 就能跨域访问

  • Access-Control-Allow-Credentials : false : 不允许携带 cookie

2. 前端设置

  1. 设置 withCredentials 为 false
// jQuery

$.ajax({
    type: "post",
    url: "xxx",
    data: data,
    xhrFields: {
    withCredentials: false       //不允许跨域请求携带 Cookie
    }
    success: function(data) {
        console.log(data)
    },
});

// axios

import axios from 'axios'
axios.defaults.withCredentials = false    //全局设置 withCredentials 为 false
export const IP = 'https://xxxxxxx.com/';  
export const myAxios = axios.create({
    baseURL: IP,
})

3. 缺点

  1. 由于不允许传cookie,所以无法把 section 通过 cookie 传到服务器,即后台获取不到section。所以无法记住登录状态,需要改为用 token 才行。

三、插件跨域

使用Google插件 :Allow-Control-Allow-Origin: *

1. 后台

不需要后台配置任何的响应头字段

2. 前端

直接写要访问的其他域的路径,跟平时使用没有区别。

3. 缺点

  1. 插件跨域后相当于在不同的会话框中,所以没有包含之前登录的 section,即后台获取不到section。

  2. 该插件会将请求的 origin 设置为 ”http: //evil.com“。

// 这是请求头携带的信息
Request Headers                               
    OPTIONS /ExcellentCourses/admin/login HTTP/1.1
    Host: 123.207.228.117
    Connection: keep-alive
    Access-Control-Request-Method: POST
    Origin: http://evil.com/                      //注意这里的origin已经被插件换了
    User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)...
    Access-Control-Request-Headers: content-type
    Accept: */*
    Accept-Encoding: gzip, deflate, sdch
    Accept-Language: zh-CN,zh;q=0.8

四、代理跨域

1. 前端

  1. 如果使用Vue框架,可以使用 Vue-cli 的 proxyTable 配置
    proxyTable: {
        '/api': {
            target: 'http://192.168.1.107:80',
            changeOrigin: true,
            pathRewrite: {
                '^/api': '/'
            }
        }
    },
    // 把含有 api 的请求路径代理到 http://192.168.1.107:80/ 上。
    //如 localhost:8080/api/add -> http://192.168.1.107:80/add

可配置 axios 来食用

import axios from 'axios'

IP = '/api';

myAxios = axios.create({
    baseURL: IP
})
    
getAllTeachers() {
    return new Promise((resolve, reject) => {
        myAxios({
            method: 'POST',
            url: '/teacher/allTeachers'
        }).then(function(res){
            resolve(res.data)
        }).catch(function(err){
            reject(err)
        })
    })
}

2. 后台

  1. 不需要后台配置任何的响应头字段
  2. session仍然可以使用

五、总结

  1. 使用第一种可以用到真实的线上环境,第二中可以配合token在真实线上使用,而第三种和第四种只是用于开发环境

  2. 如果后台不需要使用 section,并且之后整合前后代码是在同一个服务器上,则推荐使用第二种方式,因为这样前后都不要修该自己的代码,能缩短开发周期。

  3. 如果后台需要用到 section,并且之后整合前后代码是在同一个服务器上,则推荐使用第四种方式,前提是前端能使用 webpack 来配置代理服务器

  4. 如果需要跨域而前端又不能使用代理,则需要前后一起去配置有关CORS的请求头和响应头信息,不过这种方法当真正上线时也可以跨域,算是正统的方法。

六、参考

  1. 关于简单请求与非简单请求的跨域问题。跨域资源共享 CORS 详解
  2. 后台实现跨越。Spring MVC通过CROS协议解决跨域问题
  3. 跨域请求,关于后端session会话丢失的解决办法
  4. 浏览器 AJAX 跨域请求访问控制

转载于:https://www.cnblogs.com/CccZss/p/8571115.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值