跨域的四种方式

StonePanda 发布于2019-08-23 15:26 / 1156人阅读

摘要：本文主要是关于跨域的几种方式，关于什么是跨域这里就不多说了，写这个也是为了记住一些知识点的。我自己用和的写过一些，但是没有在实际工作中用过，所以对这一块了解不深。

本文主要是关于跨域的几种方式，关于什么是跨域这里就不多说了，写这个也是为了记住一些知识点的。

一. jsonp

jsonp的跨域方式很容易理解，页面的的每一个script标签浏览器都会发送get请求获取对应的文本资源，获取到了之后，会将获取回来的脚本直接执行，jsonp就是利用这个原理，在服务器写一个接口，接收请求的参数和结果回调的函数，在请求接口前应该要事先定义好要回调的函数，通过script标签请求之后得到的script会直接执行，大概的流程如下：

// 浏览器端，已经定义好了函数A
function A(str) {
  console.log(str);
}

//服务器端
function getData(method) {
  return method + "("Hello Jsonp")";
}

浏览器端会动态添加某个script标签

请求这个script标签返回的就是 A("Hello Jsonp")
会立即执行这个函数，A("Hello Jsonp")里面的"Hello Jsonp"就是实际要取的数据

二.Cors

这种跨域方式需要后端的支持，需要在后端返回接口之前设置返回的头部Access-Control-Allow-Origin
具体的实现方法要根据你用的后端的方法来设置，我用的是asp.net mvc，实现的方法有很多，其中实现的一个方法如下：

1、创建一个attribute
public class AllowCrossSiteJsonAttribute : ActionFilterAttribute
{
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");
        base.OnActionExecuting(filterContext);
    }
}
2、应用到Controller中的Action
[AllowCrossSiteJson]
public ActionResult YourMethod()
{
    return Json("data");
}

三.配置服务器反向代理

此种跨域方式需要服务器，如nginx和IIS的支持，nginx的反向代理我不是很了解，网上看的别人的配置是这样的，有需要的可以了解一下：

// proxy服务器
server {
    listen       80;
    server_name  www.domain1.com;
    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;

        # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时，可为*
        add_header Access-Control-Allow-Credentials true;
    }
}

IIS的话，可以参考一下这个iis7.5做反向代理配置方法实例图文教程

四.使用websocket

websocket和http都是基于tcp的应用层协议，websocket协议和tttp协议的主要区别是websocket支持跨域，建立的是长连接，连接是双向的。我自己用c#和nodejs的socket.io写过一些demo，但是没有在实际工作中用过，所以对这一块了解不深。

云服务器 GPU云服务器对数据仓库分析的四种方式 activity的四种状态数据迁移的四种方法 java中线程的四种状态

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102053.html

javasscript - 收藏集 - 掘金

摘要：跨域请求详解从繁至简前端掘金什么是为什么要用是的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题。异步编程入门道典型的面试题前端掘金在界中，开发人员的需求量一直居高不下。 jsonp 跨域请求详解——从繁至简 - 前端 - 掘金什么是jsonp？为什么要用jsonp?JSONP(JSON with Padding)是JSON的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题...

Rango 2019-08-20 17:15 评论0 收藏0
「JavaScript」JS两种服务端相关跨域方法详解

摘要：之前我们讲了一下四种跨域的方式四种跨域方式详解。这四种方式是使用纯来进行跨域的。今天就介绍两种有涉及到服务器的跨域技术。之前我们讲了一下四种 JavaScript 跨域的方式 - 「JavaScript」四种跨域方式详解。这四种方式是使用纯 JavaScript 来进行跨域的。今天就介绍两种有涉及到服务器的跨域技术。一、反向代理服务器基础思想很简单，将你的服务器配置成需要跨域...

kid143 2019-08-21 10:39 评论0 收藏0
react关于事件绑定this的四种方式

摘要：在组件中，每个方法的上下文都会指向该组件的实例，即自动绑定为当前组件而且还会对这种引用进行缓存，以达到和内存的最大化。在react组件中，每个方法的上下文都会指向该组件的实例，即自动绑定this为当前组件,而且react还会对这种引用进行缓存，以达到cpu和内存的最大化。在使用了es6 class或者纯函数时，这种自动绑定就不复存在了，我们需要手动实现this的绑定以下是几种绑定的方...

张利勇 2019-08-22 15:12 评论0 收藏0
同源策略与跨域

摘要：简单地理解就是因为同源策略的限制，它是浏览器为了安全性考虑一种非常重要的策略，域名下的无法操作或是域名下的对象。同源策略会限制以下三种行为和无法读取。例如中可以引用等资源，此类操作不受同源策略限制。同源策略同源策略same origin policy中的重要内容就是URL（uniform resource locator）,统一资源定位符，俗称网址。URL中的resource资源就...

xavier 2019-08-26 12:09 评论0 收藏0