zoukankan      html  css  js  c++  java
  • web跨域问题解决方案 前行

    在前端开发及调试过程中总能遇到浏览器报如下错误:

    Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    该错误由浏览器的同源策略(同ip,同端口,同协议视为同一个域,一个域内的脚本仅仅具有本域内的权限,可以理解为本域脚本只能读写本域内的资源,而无法访问其它域的资源。这种安全限制称为同源策略。 )所引起的。

    解决方案

    1.CORS(Cross-Origin Resource Sharing)是W3C在05年提出的跨域资源请求机制,它要求当前域(常规为存放资源的服务器)在响应报头添加Access-Control-Allow-Origin标签,从而允许指定域的站点访问当前域上的资源。

    不过CORS默认只支持GET/POST这两种http请求类型,如果要开启PUT/DELETE之类的方式,需要在服务端在添加一个"Access-Control-Allow-Methods"报头标签

    2.JSONP

    JSONP(JSON with Padding)是JSON的一种“使用模式”,主要是利用script标签不受同源策略限制的特性,向跨域的服务器请求并返回一段JSON数据。

    客户端

    ---------------------------------------------------------------

    <!DOCTYPE html>
      <html>
        <head lang="en">
        <meta charset="UTF-8">
        <title>JSONP</title>
        <script src="jq.js"></script>
        </head>
      <body>
      <div></div>
      <script>
        $.ajax({
          url:'http://127.0.0.1:1234/',
          dataType:"jsonp", //告知jQ我们走的JSONP形式
          jsonpCallback:"abc", //callback名
          success:function(data){
            console.log(data)
            }
          });
      </script>
      </body>
      </html>

    -------------------------------------------------------------------------------

    服务端

    ------------------------------------------------------------------------------

    var http = require('http');
    var urllib = require('url');

    var data = {'name': 'vajoy', 'addr': 'shenzhen'};

    http.createServer(function(req, res){
    res.writeHead(200, { 'Content-type': 'text/plain'});
    var params = urllib.parse(req.url, true);
    //console.log(params);
    if (params.query && params.query.callback) {
    //console.log(params.query.callback);
    var str = params.query.callback + '(' + JSON.stringify(data) + ')';//jsonp
    res.end(str);
    } else {
    res.end(JSON.stringify(data));//普通的json
    }
    }).listen(1234)

    --------------------------------------------------------------------------------

    不过JSONP始终是无状态连接,不能获悉连接状态和错误事件,而且只能走GET的形式。

    http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 参考博文

  • 相关阅读:
    第一条博客
    (原创)c#学习笔记08--面向对象编程简介01--面向对象编程的含义01--对象的含义01--属性和字段
    (原创)c#学习笔记06--函数06--委托
    (原创)c#学习笔记06--函数05--函数的重载
    (原创)c#学习笔记06--函数04--结构函数
    (原创)c#学习笔记06--函数03--main函数
    (原创)c#学习笔记06--函数02--变量的作用域02--参数和返回值与全局数据
    (原创)c#学习笔记06--函数02--变量的作用域01--其他结构中变量的作用域
    (原创)c#学习笔记06--函数01--定义和使用函数02--参数
    (原创)c#学习笔记06--函数01--定义和使用函数01--返回值
  • 原文地址:https://www.cnblogs.com/Fanzifeng/p/7117493.html
Copyright © 2011-2022 走看看