No 'Access-Control-Allow-Origin' header is present之跨域问题及解决方案

如图,是在chome浏览器的Console中显示的信息,很明显,No ‘Access-Control-Allow-Origin‘ header is present on the requested resource这句话表示出现了跨域请求问题,那么什么是跨域请求呢?

一、何为“跨域”?

跨域是浏览器对于javascript的同源策略的限制,一般我们使用ajax发送请求时会出现这种情况,举个栗子:A网站有一个请求路径为http:ip1:port1/aa,我们希望使用Ajax来获得B网站中的特定内容。而B网站的域名地址为http:ip2:prot2,只要ip和port有一个不一致,那么就出现了跨域访问问题。你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据,否则就是不安全的。跨域访问违反了同源策略,同源策略规定,浏览器的ajax只能访问跟它的HTML页面同源(相同域名或IP)的资源。

在讲跨域解决方案时,我们先来探讨一下http请求类型及浏览器发送跨域请求过程

http请求一般常见的有GET,POST,请求header里面无自定义头,Content-Type为以下几种:text/plain  multipart/form-data application/x-www-form-urlencoded。此外还有非简单请求如put delete的ajax请求,发送json格式的ajax请求,带自定义头的ajax请求。

如果是简单请求,浏览器会先发送请求,然后判断服务器返的返回头中是否支持跨域请求,否则抛出跨域异常

如果是非简单请求,浏览器会先发出OPTIONS请求方法的检测命令,判断服务器是否支持跨域请求,如果支持则发送真正的请求,如果不支持则抛出跨域异常,因此一个非简单请求每次会发送两个请求
跨域解决方案一般有以下几种:

一、JSONP方式

jsonp 全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案,是一种依靠开发人员创造出的一种非官方跨域数据交互协议。一个是描述信息的格式,一个是信息传递双方约定的方法。

jsonp的产生:

1.AJAX直接请求普通文件存在跨域无权限访问的问题,不管是静态页面也好.

2.不过我们在调用js文件的时候又不受跨域影响,比如引入jquery框架的,或者是调用相片的时候

3.凡是拥有scr这个属性的标签都可以跨域例如<script><img><iframe>

4.如果想通过纯web端跨域访问数据只有一种可能,那就是把远程服务器上的数据装进js格式的文件里.

5.而json又是一个轻量级的数据格式,还被js原生支持

6.为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback 参数给服务端,

注意:使用JSONP方式实现跨域请求只能是get请求不能使用post请求

不多说,直接上代码

function testJSONPAPI() {
        $.ajax({
            type: "POST",
            async: true,
            dataType: "jsonp",
            jsonp:"callback",
            data: {
                userName:"aaaaa"
            },
            url: "http://172.16.15.90:8080/user/getUserByJSONP",
            success: function (data) {
                console.log(data);

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {

            }
        });
    }

  后端代码:

@ResponseBody
    @RequestMapping(value = "/getUserByJSONP", method = RequestMethod.GET)
    public String getMySeatSuccess(@RequestParam("callback") String callback, String userName) {
        Gson gson = new Gson();
        Map<String, String> map = new HashMap<>();
        map.put("userName", userName);
        return callback + "(" + gson.toJson(map) + ")";
    }

需要注意的是:前端注意与后端沟通约定jsonp的值,通常默认都是用callback。后端根据jsonp参数名获取到参数后要与本来要返回的json数据按“callback(json)”的方式构造。

二、服务端通过filter或者interceptor解决跨域

既然No ‘Access-Control-Allow-Origin‘ header is present,那我们就在服务端对所有跨域的请求url做一个拦截,在拦截器里动态添加上允许跨域请求就OK了,

下面是最简单的一个允许跨域请求的拦截器

public class RemoteInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse resp, Object handler) throws Exception {
//        resp.addHeader("Access-Control-Allow-Origin","*");
        resp.setHeader("Access-Control-Allow-Origin","*");
        resp.setCharacterEncoding("UTF-8");
        return true;
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, @Nullable ModelAndView modelAndView) throws Exception {

    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, @Nullable Exception ex) throws Exception {

    }
}

三、通过springboot自带配置类中去配置

@Configuration
@EnableWebMvc
@ComponentScan({"com.example.demo.controller", "com.example.demo.interceptors"})
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
        configurer.enable();
    }
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new RemoteInterceptor()).addPathPatterns("/**");
    }

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("*");
    }
}

No 'Access-Control-Allow-Origin' header is present之跨域问题及解决方案

原文地址:https://www.cnblogs.com/yingrufeng/p/10594236.html

时间: 2024-08-29 06:02:12

No 'Access-Control-Allow-Origin' header is present之跨域问题及解决方案的相关文章

Access control allow origin 简单请求和复杂请求

错误信息: XMLHttpRequest cannot load http://web.image.myqcloud.com/photos/v2/10008653/bhpocket/0/?sign=4FcLKd5B8-p4SkFVUEJtZ1omZT0xNDQ0NzExMDE5JnQ9MTQ0NDcwNzQxOSZyPTEzMDMyMDgzOTAmdT0wJmY9.No 'Access-Control-Allow-Origin' header is present on the requeste

Access to Image at &#39;file:///Users canvas本地图片跨域报错解决方案

1.设置跨域 添加跨域条件   crossorigin="anonymous" 前提是后端支持这个图片跨域 2.上面加了之后还是报错 如标题所示 你需要把你的项目放到服务器上面跑 或者自己搭建一个本地服务器 然后在访问你的html Access to Image at 'file:///Users canvas本地图片跨域报错解决方案 原文地址:https://www.cnblogs.com/jiebba/p/9733919.html

关于Access Control Allow Origin错误的问题

前天第一次使用jquery向服务器发送Get请求.结果吸拜了...查看console提示说"No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.",嗯好吧,google了一下才知道是跨域问题. 跨域访问:AJAX 跨域访问是用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面

Jetty Cross Origin Filter解决jQuery Ajax跨域访问的方法

当使用jQuery Ajax post请求时可能会遇到类似这样的错误提示 XMLHttpRequest cannot oad http://xxxxxx. Origin http://xxxxxx is not allowed by Access-Control-Allow-Origin. 这是Ajax跨域访问权限的问题,服务器端不接受来自另一个不同IP地址的由脚本文件发出的http请求.解决这个问题需要在服务器端进行配置使服务器端可以接受来自不同域的脚本文件的http请求.一个简单的解决方法是

增加响应header让ajax支持跨域

ajax请求数据步骤 发送请求--->浏览器接受响应--->判断是否是同域下 是的话,就把响应数据返回给ajax.不是的话就提醒禁止跨域请求. 现在可以在响应头重增加 header("Access-Control-Allow-Origin: http://localhost");header("Access-Control-Allow-Methods: POST, GET, OPTIONS");header("Access-Control-Al

Risk Adaptive Information Flow Based Access Control

Systems and methods are provided to manage risk associated with access to information within a given organization. The overall risk tolerance for the organization is determined and allocated among a plurality of subjects within the organization. Allo

ajax跨域处理 No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource 问题

Controller层的类上增加@CrossOrign注解,当前文件的所有接口就都可以被调用 spring注解@CrossOrigin不起作用的原因 1.是springMVC的版本要在4.2或以上版本才支持@CrossOrigin 2.非@CrossOrigin没有解决跨域请求问题,而是不正确的请求导致无法得到预期的响应,导致浏览器端提示跨域问题. 3.在Controller注解上方添加@CrossOrigin注解后,仍然出现跨域问题,解决方案之一就是: 在@RequestMapping注解中没

express 设置header解决跨域问题

//设置跨域访问 app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT"); // res.header("Access-Control-Allow-Head

No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource. Origin &#39;null&#39; is therefore not allowed access.

一.什么是跨域访问 举个栗子:在A网站中,我们希望使用Ajax来获得B网站中的特定内容.如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题.你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据,否则就是不安全的.跨域访问违反了同源策略,同源策略的详细信息可以点击如下链接:Same-origin_policy: 总而言之,同源策略规定,浏览器的ajax只能访问跟它的HTML页面同源(相同域名或IP)的资源. 二.解决方案 常用的解决方案有两种,可以分为客户端解决方案和服务器端解决方案