前后端交互 跨域问题的解决

1、什么是跨域??

指的是浏览器不能执行其他网站的脚本,也就是前后端的代码运行在不同的服务器上的时候就会出现跨域问题,它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。

2、如何解决跨域??

方案一、使用Ajax的jsonp来解决(只能使用get请求)

前端代码:


后台代码:


方案二、使用JQurey的jsonp插件(对于get、post请求不做要求,但是从后台发来的消息依旧是jsonp格式的数据)

插件去官网下载即可

前端代码:

前后端交互 跨域问题的解决_第1张图片

后台代码:

前后端交互 跨域问题的解决_第2张图片

方案三、使用cors

 前端代码

前后端交互 跨域问题的解决_第3张图片

后台代码:

前后端交互 跨域问题的解决_第4张图片

与前两种方式相比,前端代码和未处理跨域前一样,是普通的ajax请求,但服务器代码添加了一段解决跨域的代码
    // 设置:Access-Control-Allow-Origin头,处理Session问题
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("P3P", "CP=CAO PSA OUR");
        if (request.getHeader("Access-Control-Request-Method") != null &&                   "OPTIONS".equals(request.getMethod())) {
            response.addHeader("Access-Control-Allow-Methods", "POST,GET,TRACE,OPTIONS");
            response.addHeader("Access-Control-Allow-Headers", "Content-Type,Origin,Accept");
            response.addHeader("Access-Control-Max-Age", "120");
        }

cors高级使用:在springmvc中配置拦截器。。。。。请继续补充


你可能感兴趣的:(前端)