CORS跨域问题常用解决方法代码实例

2024-09-28 07:45:30

一后端服务器使用过滤器

新建过滤器:

/**
 * 解决跨域
 */
public class AccessControlAllowOriginFilter implements Filter {
  @Override
  public void init(FilterConfig filterConfig) throws ServletException { }

  @Override
  public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
    System.out.println("解决跨域请求");
    HttpServletResponse response = (HttpServletResponse) servletResponse;
    response.setHeader("Access-Control-Allow-Origin", "*");//允许所有网站跨域访问
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    response.setHeader("Access-Control-Allow-Credentials", "true");    //这里如果前端请求header首字母是小写也是不行得,所以大小写都写上就没问题了
    response.setHeader("Access-Control-Allow-Headers", "access-control-allow-origin,content-type,x-requested-with,Content-Type,Access-Control-Allow-Headers,Content-Length,Accept,Authorization,X-Requested-With");
    filterChain.doFilter(servletRequest, response);
  }

  @Override
  public void destroy() {}
}

前端header需要添加:

$.ajax( {
      url : 'http://c2.zhuzher.com/pdm/know/active?hotelid=808047&sdate=2019-11-09&edate=2019-11-11',
      beforeSend: function (xhr) {
          xhr.setRequestHeader("Access-Control-Allow-Origin", "*"); //设置跨域访问信息
          xhr.setRequestHeader("Content-Type", "application/json;charset=utf-8");
      },
      type : 'get',
      dataType : 'json',
      data:{},
      success : function(data) {
        alert(1111);
      }
    });

二后端接口springboot/springmvc使用注解

springMVC的版本要在4.2或以上版本才支持@CrossOrigin ;

方法需要指明Get或者POST才行:

三本地nginx反向代理(推荐)

本地下载解压nginx,添加一个server配置文件:

注意,如果是放在nginx的html目录下一般是不需要加跨域配置的,否则会报配置多余错误

每次可先直接使用试试,不行再加下面add_header等配置.

###start跨域支持配置####
  add_header Access-Control-Allow-Origin '*';
  add_header Access-Control-Allow-Headers Accept,Origin,X-Requested-With,Content-Type,If-Modified-Since,Last-Modified,Content-Length,Content-Range,Range,Content-Description,Content-Disposition;
  add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
  add_header Access-Control-Request-Headers Content-Disposition;
  add_header Access-Control-Allow-Credentials true;

  ###end ###

  server {
    listen    80;
    server_name 127.0.0.1;

    #charset koi8-r;

    #access_log logs/host.access.log main;

    location / {
      root  html;
      index index.html index.htm;
    }

    #自定义本地路径,代理转发请求
    location /pdm    {
      proxy_pass  http://c2.zhuzher.com/pdm;
    }

  }

  server {
    listen    8081;
    server_name 127.0.0.1;

    #charset koi8-r;

    #access_log logs/host.access.log main;

    location / {
      root  html;
      index index.html index.htm;
    }

    #自定义本地路径,代理转发请求
     location /pdm    {
      proxy_pass http://c2.zhuzher.com/pdm;
      charset utf-8;
      #  proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

  }

项目里面直接调用配置的8081端口就可以了:

api.get('//localhost:8081/pdm/user/login',data)

注意这里还有一点需要注意,如果Content-Type是 application/json的话是无法发送跨域请求的,这里提供一种解决办法,就是接口前端请求type改成

'Content-Type':'text/plain'

发送数据转成字符串:

JSON.stringify(data)

后端接口用String接受数据,然后再转成对象就可以了:

@PostMapping("/distributeBatch")
  public ResMsg distributeSaleBatch(@RequestBody String params){
    System.out.println(params);
    //Integer user_id, Integer customer_id
    //Gson 字符串转对象
    List<Map<String, Integer>> fromJson = new Gson().fromJson(params, new TypeToken<List<Map<String, Integer>>>() {
    }.getType());
    System.out.println(new Gson().toJson(fromJson));
    return registeredCustomerService.distributeSaleBatch(fromJson);
  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

C# WebApi CORS跨域问题解决方案

前言:上篇总结了下WebApi的接口测试工具的使用,这篇接着来看看WebAPI的另一个常见问题:跨域问题.本篇主要从实例的角度分享下CORS解决跨域问题一些细节. 一.跨域问题的由来同源策略:出于安全考虑,浏览器会限制脚本中发起的跨站请求,浏览器要求JavaScript或Cookie只能访问同域下的内容. 正是由于这个原因,我们不同项目之间的调用就会被浏览器阻止.比如我们最常见的场景:WebApi作为数据服务层,它是一个单独的项目,我们的MVC项目作为Web的显示层,这个时候我们的MVC里面就
使用CORS实现JavaWeb跨域请求问题的方法

之前用jsonp 解决跨域问题,现在用CORS实现跨域请求解决java 跨域问题: 主要代码如下 package com.hy.fliter; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import javax.
Spring boot 和Vue开发中CORS跨域问题解决

跨域资源共享CORS(Cross-origin Resource Sharing),是W3C的一个标准,允许浏览器向跨源的服务器发起XMLHttpRequest请求,克服ajax请求只能同源使用的限制.关于CORS的详细解读,可参考阮一峰大神的博客:跨域资源共享CORS详解. 1. 遇到的问题: 我用spring-boot 做Rest服务,Vue做前端框架,用了element-admin-ui这个框架做后台管理.在调试的过程中遇到了如下错误: Preflight response is not
springboot中如何通过cors协议解决跨域问题

1.对于前后端分离的项目来说,如果前端项目与后端项目部署在两个不同的域下,那么势必会引起跨域问题的出现. 针对跨域问题,我们可能第一个想到的解决方案就是jsonp,并且以前处理跨域问题我基本也是这么处理. 但是jsonp方式也同样有不足,不管是对于前端还是后端来说,写法与我们平常的ajax写法不同,同样后端也需要作出相应的更改.并且,jsonp方式只能通过get请求方式来传递参数,当然也还有其它的不足之处,针对于此,我并没有急着使用jsonp的方式来解决跨域问题,去网上找寻其它方式,也就是本文主
django基于cors解决跨域请求问题详解

一同源策略同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同. 比如:我在本地上的域名是127.0.0.1:8000,请求另外一个域名:127.0.0.1:8001一段数据浏览器上就会报错,这个就是同源策略的保护,如果浏览器对javas
快速解决跨域请求问题:jsonp和CORS

网上各种跨域教程,各种实践,各种问答,除了简单的 jsonp 以外,很多说 CORS 的都是行不通的,老是缺那么一两个关键的配置.本文只想解决问题,所有的代码经过亲自实践. 本文解决跨域中的 get.post.data.cookie 等这些问题. 本文只会说 get 请求和 post 请求,读者请把 post 请求理解成除 get 请求外的所有其他请求方式. JSONP JSONP是利用浏览器对script的资源引用没有同源限制,通过动态插入一个script标签,当资源加载到页面后会立即执行的原
Spring Boot 通过CORS实现跨域问题

同源策略很多人对跨域有一种误解,以为这是前端的事,和后端没关系,其实不是这样的,说到跨域,就不得不说说浏览器的同源策略. 同源策略是由 Netscape 提出的一个著名的安全策略,它是浏览器最核心也最基本的安全功能,现在所有支持 JavaScript 的浏览器都会使用这个策略.所谓同源是指协议.域名以及端口要相同.同源策略是基于安全方面的考虑提出来的,这个策略本身没问题,但是我们在实际开发中,由于各种原因又经常有跨域的需求,传统的跨域方案是 JSONP,JSONP 虽然能解决跨域但是有一个很大
Spring Boot如何通过CORS处理跨域问题

跨域的产生就是因为浏览器的同源策略.它是浏览器的核心安全功能,所谓的同源,就是指域名,协议,还有端口要相同.传统的方案就是JSONP(前端处理方案),但是JSONP有很大的局限性,就是只支持GET请求,所以不能满足我们的需求,而CORS(Cross-origin-resource sharing)跨域资源共享,就可以解决这个问题.他是一个浏览器规范,一个w3c标准,提供web服务从不同网域传来的沙盒脚本的方法,避开了浏览器的同源策略. CORS是后端的一种处理的方案,在Spring中可以配置解决
Ajax跨域问题及解决方案（jsonp，cors）

跨域跨域有三个条件,满足任何一个条件就是跨域 1:服务器端口不一致 2:协议不一致 3:域名不一致解决方案: 1.jsonp 在远程服务器上设法动态的把数据装进js格式的文本代码段中,供客户端调用和进一步处理:在前台通过动态添加script标签及src属性,表面看上去与ajax极为相似,但是,这和ajax并没有任何关系:为了便于使用及交流,逐渐形成了一中非正式传输协议,人们把它称作 jsonp . 代码如下: html: <body> <form action="/&q
CORS跨域问题常用解决方法代码实例

一后端服务器使用过滤器新建过滤器: /** * 解决跨域 */ public class AccessControlAllowOriginFilter implements Filter { @Override public void init(FilterConfig filterConfig) throws ServletException { } @Override public void doFilter(ServletRequest servletRequest, ServletR
Vue 项目中遇到的跨域问题及解决方法(后台php)

问题描述前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The valu
Python中flask框架跨域问题的解决方法

目录一.跨域是什么二.如何解决跨域问题总结一.跨域是什么从一个域名去请求另一个域名,这个过程称之为跨域.浏览器从一个域名的网页去请求另一个域名的资源,域名.端口.协议有一个不一样,请求都属于跨域.跨域其实是浏览器的一个保护政策. 网页上有ajax请求时,会报:No 'Access-Control-Allow-Origin' header is present on the requested '这个错误. 二.如何解决跨域问题 1.跨域请求的过程因此我们只要做到请求头部信息一致即可.
Java实现CORS跨域请求的实现方法

问题使用前后端分离模式开发项目时,往往会遇到这样一个问题 -- 无法跨域获取服务端数据这是由于浏览器的同源策略导致的,目的是为了安全.在前后端分离开发模式备受青睐的今天,前端和后台项目往往会在不同的环境下进行开发,这时就会出现跨域请求数据的需求,目前的解决方案主要有以下几种: JSONP.iframe.代理模式.CORS等等前面几种方式在这里不讲,网上有很多资料.在这里我主要分享一下CORS这种解决方式,CORS即"跨域资源共享",它允许浏览器向跨源服务器,发出XMLHttpRe
vue 处理跨域问题及解决方法小结

当你在发送网络请求的时候,出现以下保存信息,恭喜你跨域了 Access to XMLHttpRequest at 'XXXXX' from origin 'XXXXXX' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the reques
SpringBoot跨域问题的解决方法实例

谈到跨域问题,首先我们要认识一下浏览器的同源策略百度百科对同源策略的解释当一个浏览器的两个tab页中分别打开来百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的, 即检查是否同源,只有和百度同源的脚本才会被执行. [1] 如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问. 同源策略是浏览器的行为,是为了保护本地数据不被JavaScript代码获取回来的数据污染,因此拦截的是客户端发出的请求回来的数据接收,即请求发送了,服务器响应
UEditor 编辑器跨域上传解决方法

解决的方法: 1.在 ueditor\dialogs\internal.js 加入 document.domain = '根域名'; 2.在当前页面同样指定根域名: 复制代码代码如下: <script type="text/javascript"> document.domain = "根域名";</script> 这样在 chrome.firefox 下没有问题,但在 ie 下还需要简单修改下 UEditor,在 editor.js
Angular客户端请求Rest服务跨域问题的解决方法

1.问题描述:通过Origin是http://localhost:4200请求http://localhost:8081的服务,控制台报错如下,但是Response为200.客户端和服务端IP相同,但是端口不同,存在跨域问题. 复制代码代码如下: XMLHttpRequest cannot load http://localhost:8081/api/v1/staffs. No 'Access-Control-Allow-Origin' header is present on the req
js关于getImageData跨域问题的解决方法

在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): function createGSCanvas(img){ var canvas=document.createElement("canvas"); canvas.width=img.width; canvas.height=img.height; var ctx=canvas.getContext("2d"); ctx.dra
IE9版本以下ajax 跨域问题可行解决方法

ajax跨域请求数据在谷歌火狐我本地IE11都是没问题的. 让测试就发现问题了,IE8下请求不到数据,然后我查看一下自己写的js看有没有不兼容问题,可是都没有啊,为什么就请求不到呢. 我把ajax的error打印出来提示no transport,网上找了资料在js中第一行加这个就可以了jQuery.support.cors = true; 好了这个问题没有了,可是又有另一个error没有权限.这个问题百度了好多都没有我想要的,最后看了一篇文章让我豁然开朗这是IE浏览器的安全性设置问题, 解决方法

CORS跨域问题常用解决方法代码实例

相关推荐

随机推荐