跨域的几种解决方案

原创 2018年04月17日 11:32:04

关于跨域

JSONP

这个可能是好多人想到的第一解决方案了但是其实这个也有局限性

  • 需要前后端配合
  • 你可以实现跨域,别人也可以调用你的接口了

具体实现:
服务器端:
http://127.0.0.1:8081/test.php

<?php
 echo 'handler(' . json_encode(array('a' => 'b')) . ')'; //简单输出handler({a:b})

客户端:

一、动态加载script标签方式

    function setScript() {
        var script = document.createElement('script');
        script.setAttribute('src', 'http://127.0.0.1:8081/test.php?callback=handler');//callback指定回调函数名称
        document.querySelector("head").appendChild(script);
    }
setScript();//动态加载script
   //  处理函数
    function handler(data) {
        alert(data.a);
    }

二 、利用jQuery的ajax

   $.ajax({
            async: true,
            url: "http://127.0.0.1:8081/test.php",
            type: "GET",
            dataType: "jsonp", // 设置为JSONP方式
            jsonp: 'callback', //覆盖默认的 jsonp 回调参数名 callback
            jsonpCallback: 'handler', //回调函数名
            data: {
                q: "javascript",
                count: 1
            },
            success: function (response, status, xhr) {
                console.log(response);
            }
        });


        function handler(data) {
        alert(data.a);
        }

Nginx反向代理

利用Nginx反向代理把跨域的网址变成自己可以访问的地址,但是存在的问题在于

  • 请求安全性,可能请求到恶意代码
  • Nginx的设置设计到运维人员的设置,并非开发人员控制的

具体实现:

      location /getApi { 
            rewrite  ^/getApi/(.*)$ /$1 break;
            proxy_pass   http://127.0.0.1:8081;
      }

利用Chrome插件

在Chrome中利用沙盒可以进行跨域访问
具体实现
科学上网,打开Google应用商店https://chrome.google.com/webstore/category/extensions?utm_source=chrome-ntp-icon
搜索CROS下载即可

后端开放访问

具体实现

header("Access-Control-Allow-Origin: http://XXXXXXXX.com ");
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhy421202048/article/details/79972422

web多应用下跨域通信

-
  • 1970年01月01日 08:00

解决JavaWeb项目跨域

在当前工程的web.xml文件中加入
  • search_fuck_in_web
  • search_fuck_in_web
  • 2014-06-17 16:03:21
  • 551

跨域解决方案大全

什么是跨域注:本文完整示例地址 先来说一个概念就是同源,同源指的是协议,端口,域名全部相同。 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果...
  • zp1996323
  • zp1996323
  • 2016-10-25 19:05:01
  • 4847

Web开发中跨域的几种解决方案

Web开发中跨域的几种解决方案 设置 document.domain有src的标签JSONPnavigation 对象跨域资源共享(CORS)window.postMessage访问控制安全的...
  • nanjingshida
  • nanjingshida
  • 2017-05-07 13:20:36
  • 728

三种方法解决跨域问题

javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法:  1.基于iframe实...
  • andyfu57
  • andyfu57
  • 2016-05-21 12:26:11
  • 5101

跨域解决方案JSONP

什么是跨域老生常谈的问题了。下面列出一个表格: URL 说明 是否跨域 http://www.a.com/a.js http://www.a.com/b.js 同一个域名 否 ...
  • jlin991
  • jlin991
  • 2017-02-24 17:27:51
  • 300

详解5种跨域方式及其原理

同源定义  如果两个页面拥有相同的协议(protocol),端口(如果指定),和主机,那么这两个页面就属于同一个源(origin)。 以下是同源检测的示例 URL 结果...
  • u013234372
  • u013234372
  • 2016-12-06 17:13:23
  • 4043

常见js跨域解决方案

ajax跨域 、uploadify跨域、huploadify跨域、security error、常见js跨域解决方案
  • u014411966
  • u014411966
  • 2016-01-21 20:04:00
  • 2254

前端跨域解决方案

  • 2017年10月12日 11:29
  • 79KB
  • 下载

几种跨域方式总结

前言 我开通了一个微信公共号“王和阳的航海日志”,在上面记录着自己的学习、思考、实践和成长的过程,欢迎关注、交流和拍砖。 碎碎念:距离上次写博客过去了半个月,期间顺利拿到鹅厂前端工程师的...
  • as645788
  • as645788
  • 2016-04-30 11:22:07
  • 9664
收藏助手
不良信息举报
您举报文章:跨域的几种解决方案
举报原因:
原因补充:

(最多只允许输入30个字)