精华内容
下载资源
问答
  • 常用解决跨域的方案
    千次阅读
    2020-10-25 13:01:47

    前言

    在项目开发中,跨域问题是经常遇到的,说到底,跨域是浏览器的一种安全自我保护机制的体现,即域的同源策略的保护,关于跨域解决,网上参考的资料挺多,比如前端解决手段、后端解决办法、网关层的方案等,下面从java后端几种常用的解决方式简单总结下

    案例前导

    首先我们来看一个简单的跨域问题,我们在一个html页面模拟发送一个ajax请求,通过后端接口请求数据

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>跨域测试</title>
    
        <script src="../../lib/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    </head>
    <body>
        
        <div id="app">
            <ul v-for="city in hotCitys">
               <li>{
      {city}}</li>
            </ul>
        </div>
    
        <script>
             const v
    更多相关内容
  • 这里对跨域做个简单介绍以及提供几种解决办法。  由于浏览器实现的同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,所以AJAX是不允许跨域的。这里提供自己常用的三种方法: 1、jsonp...
  • vue项目中常用解决跨域的方法

    千次阅读 2022-07-01 11:54:36
    学习跨域的相关笔记

    一、什么是跨域?

    跨域问题的出现是因为浏览器的同源策略问题。所谓同源就是必须有以下三个相同点:协议相同、主机相同、端口相同。如果其中有一项不同,即出现非同源请求,就会产生跨域。当我们请求一个接口的时候,出现如:Access-Control-Allow-Origin 字眼的时候说明请求跨域了

    二、如何解决跨域?

    跨域的解决方案:

    jsonp
    cors
    Node中间件代理(两次跨域) 即 Proxy
    nginx反向代理 CORS支持所有类型的HTTP请求,是跨域HTTP请求的根本解决方案
    JSONP只支持GET请求,JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。
    不管是Node中间件代理还是nginx反向代理,主要是通过同源策略对服务器不加限制。
    日常工作中,用得比较多的跨域方案是cors和nginx反向代理

    主要解释CROS和Proxy两种方式

    1、CROS

    • CROS是 Cross-Origin Resource Sharing的缩写,翻译过来就是跨域资源共享的意思。它由一系列传输的HTTP头组成,这些HTTP头会决定浏览器是否阻止前端 JavaScript代码获取跨域请求的响应。
    • CORS的实现比较简单方便,只需要增加一些 HTTP头,让服务器能声明允许的访问来源。只要后端实现了 CROS就实现了跨域。

    2、Proxy(代理)

    • 通过启动本地服务器进行代理转发目标服务器。而跨域只针对于浏览器,对于node服务发出的请求是不会出来跨域的,从而解决了跨域的问题。
    • 在vue.config.js文件
    1、可配置多个不同的proxy
    devServer: {
        proxy: {
          '/api': {//代理标识,一般是每个接口前的相同部分
            target: 'http://23.15.11.15:8000', // 这里写的是访问接口的域名和端口号
            changeOrigin: true, // 允许跨域请求
            pathRewrite: { // 重写路径,替换请求地址中的指定路径
              '^/api': '/user'
            }
          },
          '/login': {
    		 target: 'http://23.15.11.15:8000',
    		 changeOrigin: true,
    		 pathRewrite:{
    		   '^/login':''  //替换成空
    		 }
    	   }
        }
      },
    
    示例:
    • http://localhost:8080/api/test --> http://23.15.11.15:8000/user/test
    • http://localhost:8080/login/index–> http://23.15.11.15:8000/index
    2、对所有的接口都代理
    devServer: {
     proxy: 'http:/www.ljc.com'
    }
    
    示例:
    • http://localhost:8080/api/test --> http://www.ljc.com/api/test
    • http://localhost:8080/login/index–> http://www.ljc.com/login/index
    展开全文
  • VUE跨域、常用解决跨域的方法

    万次阅读 多人点赞 2022-01-27 09:54:17
    VUE跨域、常用解决跨域的方法

    当我们遇到请求后台接口遇到 Access-Control-Allow-Origin 时,那说明跨域了。

    跨域是因为浏览器的同源策略所导致,同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,同源是指:域名、协议、端口相同

    解决跨域常用方法:

    一、VUE中常用proxy来解决跨域问题

    1、在vue.config.js中设置如下代码片段

    module.exports = {
      dev: {
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: { // 配置跨域
        '/api':{
            target:`http://www.baidu.com`, //请求后台接口
            changeOrigin:true, // 允许跨域
            pathRewrite:{
                '^/api' : '' // 重写请求
            }
        }
      },
    }

     2、创捷axioss实例时,将baseUrl设置为 ‘/api’

    const http = axios.create({
      timeout: 1000 * 1000000,
      withCredentials: true,
      BASE_URL: '/api'
      headers: {
         'Content-Type': 'application/json; charset=utf-8'
       }
    })

    二、JSONP解决跨域

    Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。

    <!DOCTYPE html>
           <html>
           <head>
               <meta charset="utf-8">
           </head>
           <body>
           <div id="textID"></div>
           <script type="text/javascript">
               function text_jsonp(req){
                   // 创建script的标签
                   var script = document.createElement('script');
                   // 拼接 url
                   var url = req.url + '?callback=' + req.callback.name;
                   // 赋值url
                   script.src = url;
                   // 放入头部
                   document.getElementsByTagName('head')[0].appendChild(script);
               }
           </script>
           </body>
           </html>

     三、CORS是跨域资源共享(Cross-Origin Resource Sharing),以 ajax 跨域请求资源,支持现代浏览器,IE支持10以上

    在CORS请求,头部信息中包含以下三个字段:

    Access-Control-Allow-Origin: 该字段是必须的。它的值要么是请求时Origin字段的值,要么是一个*,表示接受任意域名的请求,

    Access-Control-Allow-Credentials: 可选,值为布尔值,表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求之中。设为true,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器。这个值也只能设为true。如果要发送Cookie,Access-Control-Allow-Origin必须设置为必须指定明确的、与请求网页一致的域名

    Access-Control-Expose-Headers:可选。CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-ControlContent-LanguageContent-TypeExpiresLast-ModifiedPragma。如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定

    详细讲解请查看阮大神的文章,传送门附上:CORS详解

    四、iframe实现跨域

    iframe(src){
                //数组
                if(Array.isArray(src)){
                    this.docs.visible = true;
                }else{
                    this.docs.visible = false;
                    
                }
                this.link  = src
                if(this.docs.visible == false){
                    if(this.$refs['ruleIframe'] && this.$refs['ruleIframe'].querySelector('iframe')){
                        this.$refs['ruleIframe'].querySelector('iframe').remove()    //删除自身
                    }
                    var iframe = document.createElement('iframe');
                    iframe.width = '100%';
                    iframe.height = '100%';
                    iframe.setAttribute('frameborder','0')
                    iframe.src = src;                
                    this.append(iframe)
                }
                
            },
            //创建元素 防止  获取不到 ruleIframe 递归
            append(iframe){
                if(this.$refs['ruleIframe']){
                    this.$refs['ruleIframe'].appendChild(iframe);
                    return
                }
                setTimeout(()=>{
                    this.append(iframe);
                },500)    
            },

    感谢各位看官 阅读~

    希望能帮助到大家

    展开全文
  • 解决跨域常用方案

    2021-02-24 15:15:12
    一、 什么是跨域跨域是指一个域下的文档或脚本试图去请求另一个域下的资源 二、什么是同源策略? 同源策略/SOP(Same origin policy...三、跨域解决方案 1、 通过jsonp跨域 2、 document.domain + iframe跨域 3、 lo

    一、 什么是跨域?

    跨域是指一个域下的文档或脚本试图去请求另一个域下的资源

    二、什么是同源策略?

    同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

    三、跨域解决方案

    1、 通过jsonp跨域
    2、 document.domain + iframe跨域
    3、 location.hash + iframe
    4、 window.name + iframe跨域
    5、 postMessage跨域
    6、 跨域资源共享(CORS)
    7、 nginx代理跨域
    8、 nodejs中间件代理跨域
    9、 WebSocket协议跨域

    四、常用跨域解析(都需要服务端配合)

    1. 通过jsonp跨域

    响应头添加Header允许访问
    跨域资源共享(CORS)Cross-Origin Resource Sharing

    这个跨域访问的解决方案的安全基础是基于"JavaScript无法控制该HTTP头"

    它需要通过目标域返回的HTTP头来授权是否允许跨域访问。

    response.addHeader(‘Access-Control-Allow-Origin:*’);//允许所有来源访问
    response.addHeader(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

    1. jsonp 只支持get请求不支持post请求

    jsonp 跨域的原理就是用的动态加载 script 标签的src ,所以我们只能把参数通过url的方式传递,所以jsonp的 type类型只能是get !

    用法:①dataType改为jsonp
    ②jsonp : “jsonpCallback”————发送到后端实际为http://a.a.com/a/FromServlet?userName=644064&jsonpCallback=jQueryxxx
    ③后端获取get请求中的jsonpCallback
    ④构造回调结构

    $.ajax({
       type : "GET",
       async : false,
       url : "http://a.a.com/a/FromServlet?userName=644064",
       dataType : "jsonp",//数据类型为jsonp
       jsonp : "jsonpCallback",//服务端用于接收callback调用的function名的参数
       success : function(data) {
       alert(data["userName"]);
    },
    error : function() {
       alert('fail');
       }
    });
    

    其实jquery 内部会转化成

    http://192.168.10.46/demo/test.jsp?jsonpCallback=jQuery202003573935762227615_1402643146875&action=aaron

    然后动态加载

    然后后端就会执行jsonpCallback(传递参数 ),把数据通过实参的形式发送出去。

    使用JSONP 模式来请求数据的整个流程:客户端发送一个请求,规定一个可执行的函数名(这里就是 jQuery做了封装的处理,自动帮你生成回调函数并把数据取出来供success属性方法来调用,而不是传递的一个回调句柄),服务器端接受了这个 jsonpCallback函数名,然后把数据通过实参的形式发送出去

    1. httpClient内部转发
      实现原理很简单,若想在B站点中通过Ajax访问A站点获取结果,固然有ajax跨域问题,但在B站点中访问B站点获取结果,不存在跨域问题,这种方式实际上是在B站点中ajax请求访问B站点的HttpClient,再通过HttpClient转发请求获取A站点的数据结果。但这种方式产生了两次请求,效率低,但内部请求,抓包工具无法分析,安全

    2. 使用nginx搭建企业级接口网关方式

    我们访问以www.nginxtest.com开头且端口为80的网址,nginx将会进行拦截匹配,若项目名为A,则分发到a.a.com:81。实际上就是通过"同源"的域名,不同的项目名进行区分,通过nginx拦截匹配,转发到对应的网址。整个过程,两次请求,第一次请求nginx服务器,第二次nginx服务器通过拦截匹配分发到对应的网址。

    展开全文
  • 前端开发中常用的几种跨域解决方案.docx
  • 什么是跨域? 浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。 这是...
  • Nginx跨域解决方案

    千次阅读 2022-08-03 11:23:52
    Nginx跨域解决方案
  • 一、什么是跨域?   在前端领域中,跨域是指浏览器允许向服务器发送跨域请求,从而克服Ajax只能同源使用的限制。 什么是同源策略?   同源策略是一种约定,由Netscape公司1995年引入浏览器,它是浏览器...
  • 常见的跨域解决方案
  • 浏览器跨域问题以及常用解决方案

    千次阅读 2021-09-16 22:08:16
    跨域的根本原因就是因为浏览器的同源策略,这是浏览器出于安全性考虑做出的限制,所谓同源是指:域名、协议、端口相同。 比如在互联网上有两个资源(网页或者请求等),如果A想要访问B的资源,如果A、B并非同源,即...
  • 一、什么是跨域?   在前端领域中,跨域是指浏览器允许向服务器发送跨域请求,从而克服Ajax只能同源使用的限制。 什么是同源策略?   同源策略是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心...
  • 设置express代理请求 在基于vue-cli的项目中,在开发环境配置(config/dev.env.js)中设置代理,能够将所有/apidomain开头的请求都通过npm run dev启动的express服务器重定向到目标接口 ... proxyTable: { ...
  • 什么是跨域跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域: 1.) 资源跳转: A链接、重定向、表单提交 2.) 资源嵌入: 、其实我们通常所说的跨域是狭义的,是由浏览器...
  • 跨域的五种解决方案详解

    千次阅读 2022-06-11 23:15:56
    CORS :全称cross origin resource share (资源共享) 工作原理: 服务器 在返回响应报文的时候,在响应头中 设置一个允许的header
  • 1.知道了跨域的最常用的三个解决方案分别是 1.CORS解决跨域问题,这需要通过后端来解决,通过设置header头来通配。使服务器允许跨域请求接口数据,而前端正常使用axios请求方式。 2.通过JSONP的方式来解决跨域问题,...
  • Nginx 解决跨域问题

    千次阅读 2021-09-07 15:09:35
    什么是跨域 当一个请求url的协议、域名、端口三者之间任意一...nginx解决跨域请求 nginx.config配置 server { listen 80; server_name my.cn.com; location /{ proxy_pass http://test.cn.com:8081/test; ...
  • 跨域问题的几种解决方案汇总

    千次阅读 2021-12-02 15:33:57
    什么是“跨源” JSONP CORS ...网上跨域的文章那么多,跨的我眼睛都疲劳了,不看了不看了 别走…我尽量用最简单的方式将常见的几种跨域解决方案给大家阐释清楚,相信认真看完本文,以后不管是作
  • 希望能帮助你!! 前端的很多工作都是在请求数据,将数据渲染到页面中。所以面试官问这个问题,主要是想了解你是否会请求数据,请求自己的数据,比较简单,请求别人的数据,就会造成跨域。...跨域解决方案有很多
  • 前后端跨域解决方案

    千次阅读 2022-03-14 10:47:18
    常用跨域解决方案 前端设置对应的请求头 后端设置通配响应头 使用jsonp的方式处理(利用script标签不受跨域协议的影响) 设置代理服务器的方式处理(利用服务器与服务器之间不受跨域协议的影响) ...
  • 跨域解决方案:nginx

    千次阅读 2021-03-02 11:12:56
    一:解决方案 1、 通过jsonp跨域 2、 document.domain + iframe跨域 3、 location.hash + iframe 4、 window.name + iframe跨域 5、 postMessage跨域 6、 跨域资源共享(CORS) 7、 nginx代理跨域 8、 nodejs中间件...
  • 目录 引言 一、JSONP 跨域 二、 iframe跨域 2.1 window.name + iframe跨域 2.2 location.hash + iframe跨域 ...上文中提到了cors 解决跨域的方法,除此之外还有很多。 一、JSONP 跨域 ...
  • 跨域的几种解决方案(详细)

    千次阅读 2021-09-08 16:13:59
    解决跨域方式3.1 jsonp方式3.2 cors方式3.3 proxy代理转发 1.什么是跨域 .网页所在url的协议、域名、端口号,和Ajax请求url的协议、域名、端口号有一个对应不上,就发生跨域 .跨域是浏览器对ajax做出的限制 2.演示用...
  • 跨域:也叫跨域请求,当触发了同源策略,并且还想拿到人家的数据,我们管触发了同源策略的请求叫跨域请求. 同源策略:是浏览器给出的关于网络安全...解决跨域的方式有: 1.jsonp; 2.proxy(代理); 3.cors(跨域资源共享) ...
  • 一、什么是跨域? 在前端领域中,跨域是指浏览器允许向服务器发送跨域请求,从而克服Ajax只能同源使用的限制。 什么是同源策略? 同源策略是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本...
  • 解决跨域的四种方式

    千次阅读 2022-06-04 20:32:50
    跨域的概念以及解决跨域的三种方法
  • 文章目录一、问题背景:二、CORS简介:三、详解响应头:Access-Control-Allow-Origin 该字段必填。...四、解决办法:第一种办法:第二种办法:第三种办法:五、文章出处 一、问题背景: Same Origin Po
  • 代理跨域场景分析场景1:你的项目myweb,myweb的前端有一个接口是去访问一个非myweb的服务器。非myweb服务器是第三方服务器,你不能去对第三方服务器做改动。场景2:你的项目是个微服务架构的。那你的前端页面可能就...
  • SpringBoot前后端分离解决跨域问题的三种解决方案

    千次阅读 多人点赞 2022-03-20 12:43:28
    SpringBoot解决跨域问题的三种方法

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,974
精华内容 7,589
关键字:

常用解决跨域的方案