跨域问题实战

背景

公司最近有这样一个需求,XXX用前后端分离的技术实现。用Restful api风格。

问题出现

写好的http接口提供给前段人员处理出现如下图:错误图一


$$错误图一1$$

错误描述:
no Access-Control-Allow-Origin is present on the requested resource. Orgin ‘http:localhost:8080‘ is therefore not allowed access
字面意思是 没有访问控制允许源在请求的资源上。没有源在‘http:localhost:8080‘上所以不允许访问。

排查

从问题的描述上可以知道,这一次Http请求资源没有成功,原因是请求的资源不允许。这边我提供的http接口是没有设置限制的,于是我问前段的人是怎么调用的这个接口。原来他是通过Ajax来进行请求的,并且还是两个不同的项目,瞬间恍然大悟,跨域问题。

解决

方案一:客户端用JSONP处理
通过ajax请求中的dataType:‘JSONP‘来解决

$.ajax({
    url: 'xxxx',
    dataType : 'JSONP',
    type : 'GET',
    .....: '....',
    success : function(msg){
    }
})

可以通过这个方案来解决,但是局限性是跨域请求只支持GET请求。

方案二:服务端设置返回的HTTP请求头部允许该网站访问。
response.setHeader("Access-Control-Allow-Origin","你允许让别人访问你这次http请求链接的地址 eg:www.baidu.com");

防止

以后在进行做前后端分离的任务的时候,两个项目并且不是在相同的域名下面的时候,一定会有跨域的问题。如果你整的这个项目都是用来给前段提供http接口的时候,你可以设置过滤器来进行这个跨域操作。

精华

其实这都只是简单的http请求,那么当在进行复杂的http请求的时候,由应该怎么操作呢,其实也是有解决的办法的

方案一:服务端设置返回http头部允许该网站的复杂请求
通过response.setHeader("Access-Control-Allow-Headers","头部类型")

建议可以看一下该博客,会有很大的帮助
本博客地址 :https://www.cnblogs.com/Krloypower/p/9249902.html
跨域资源共享 CORS 详解

原文地址:https://www.cnblogs.com/Krloypower/p/9249902.html

时间: 2024-10-12 22:25:15

跨域问题实战的相关文章

js中各种跨域问题实战小结(二)

这里接上篇:js中各种跨域问题实战小结(一) 后面继续学习的过程中,对上面第一篇有稍作休整.下面继续第二部分: -->5.利用iframe和location.hash -->6.window.name跨域实现 利用iframe和location.hash实现跨域 想必有很多人像我之前一样,或许只知道上面文中所说的那几种方法.所以,我刚了解到可以用iframe和location.hash来实现跨域的时候,我会想,为什么他们可以实现.iframe是什么,有什么特性,location.hash是什么

跨域问题实战 2

跨域问题实战 2 背景 由于整个项目提供出去的API都不是跨域的只是个别是需要跨域的,所以再上一次跨域问题实战中,自己是直接再controller层其中需要提供出去跨域的方法里设置了HttpServletResponse.setHeader("Access-Control-Allow-Origin","*").而且上次提供出去的只是一次简单的get请求,而不是复杂请求.但是呢,这次的需求是记录用户行为日志的一次跨域请求,也就是说是一次post请求.其中就涉及到htt

js中各种跨域问题实战小结

什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源策略是怎么回事了:javascript的同源策略 于是当我们想某些特定的功能的时候,实现合理的跨域请求就显得比较重要了. -->1.原生Ajax对象xhr的跨域 -->2.简单jsonp -->3.图像Ping -->4.document.domain+iframe实现跨域 javascr

2018 Vue+Django API前后端分离开发电商新技术跨域项目实战

课程目标帮助大家快速入门Django REST framework这一个API框架. 帮助大家详细了解Django REST framework中序列化.视图.路由等模块的使用. 帮助大家使用Django REST framework快速开发一套可用的API服务,并且自动生成API文档.适用人群Python开发工程师,后端开发工程师课程简介目前前后端分离的架构设计越来越流行,前后端通过API来实现数据通信.那如何快速开发一套符合RESTful风格的API呢?Django REST framewo

跨域MPLS 虚拟私有网络的Option 2 解决方案全实战

跨域MPLS ×××的Option 2 解决方案实战 读者如果要完成Option2的实施,可以在Option1的基础上完成,也可以在构建完毕两个AS内部的MPLS ×××之后来实施.Option2和Option1的区别在于在ASBR上不在需要VRF的实施,而直接通过直连路由在ASBR之间构建MP-EBGP的×××V4邻居关系,即通过BGP更新两侧AS的客户路由:同时在ASBR之间为标签转发,而不在是IP转发8.2.1 Option2中ASBR之间构建×××v4的EBGP邻居请读者自行去掉ASBR

Redis实战和核心原理详解(5)使用Spring Session和Redis解决分布式Session跨域共享问题

Redis实战和核心原理详解(6)使用Spring Session和Redis解决分布式Session跨域共享问题 前言 对于分布式使用Nginx+Tomcat实现负载均衡,最常用的均衡算法有IP_Hash.轮训.根据权重.随机等.不管对于哪一种负载均衡算法,由于Nginx对不同的请求分发到某一个Tomcat,Tomcat在运行的时候分别是不同的容器里,因此会出现session不同步或者丢失的问题. 实际上实现Session共享的方案很多,其中一种常用的就是使用Tomcat.Jetty等服务器提

3.2.3、Google Tag Manager实战指南—— 跨域跟踪

如果您使用统一版跟踪代码,即analytics.js,这个已经默认开启了跨子域跟踪的,可以直接使用跟踪代码,如图3-41所示,但还需要配置一些东西: 图3-41 跟踪代码里面的auto表示自动将Cookie生成在顶级域名之下,也就是两个子域会是共用同一个顶级域名里的Cookie了.如果您是用GTM管理的,直接配置CookieDomain就行了,这个的作用就是前面auto,设置如图3-42所示: 图3-42 配置CookieDomain 上面两种方法都是实现同样的作用,接下来就是引荐流量排除了,使

跨域访问之JSONP

跨域 在平常的工作中常常会遇到A站点的需要访问B站点的资源. 这时就产生了跨域访问. 跨域是指从一个域名的网页去请求另一个域名的资源.浏览器遵循同源策略,不允许A站点的Javascript 读取B站点返回的数据.因为A站点的javascript 与B返回的数据不同源的.但是浏览器并不阻止A的Ajax请求访问B,浏览器允许A取回B的数据,但是不允许A中的脚本操作B的数据.如下图所示的③ 同源策略: 数据与操作必须是同源的,否则不能操作. 什么是同源:浏览器认为的同源是什么? 判断是否同源,标准如下

【ajax跨域】原因原理解决

1.安全,跨域cookie iframe 2.很简单,就是利用<script>标签没有跨域限制的“漏洞”(历史遗迹啊)来达到与第三方通讯的目的.当需要通讯时,本站脚本创建一个<script>元素,地址指向第三方的API网址,形如: <script src="http://www.example.net/api?param1=1&param2=2"></script> 并提供一个回调函数来接收数据(函数名可约定,或通过地址参数传递)