zoukankan      html  css  js  c++  java
  • 关于跨域的处理的几种方法的整理

    跨域是经常遇到的这里不再说跨域什么意思了,协议不同,端口不同,域名不同是为跨域;

    解决方法:

    1,前端采取jsop来获取数据

    代码示例:此处后台是node.js简单实现,页面端口localhost:3020

    前端:
    $(function(){
    $("#btn").click(function(){
    $.ajax({
    method:"get",
    url:"http://127.0.0.1:3022/app/jsonp",//这里服务端端口是3022,跨域
    dataType:"jsonp",//数据类型是jsonp
    jsonp:"callback",//参数为callback
    success:function(data){
    console.log(data.name)
    }

    })
    })
    })
    后端node.js
    var express=require("express");
    var app=express();
    app.use(express.static("./"));
    app.get('/app/jsonp',function(req,res,next){
    res.jsonp({name:'lyz'});//注意此处格式必须是jsonp,各个语言可能写法不同
    });

    app.listen(3022,function(req,res){

    console.log(2)
    })
    原理分析:人们加载任意地址的js文件都有效果,于是到把数据放到js里面,然后让前端调取,jsonp只对get有效,post无效的;

    2 xhr2
    这是html5新产生的ajax2,衍生出来的,于是在一些浏览器上是无效的;
    这方法就是直接在服务端设置,本方法可以post,get都行
    header('Access-control-Allow-Origin:*')
    前台代码
    $.ajax({
    method:"get",
    url:"http://127.0.0.1:3022/app/jsonp",
    success:function(data){
    console.log(data)
    }

    })
    这里如果前端是非简单请求(方法不是get,post,或者content-type不是formdata,formurlencode),那么会多个options嗅探,如果服务器返回支持跨域,则继续请求
    如果是简单请求,则直接请求,同时header上附加origin
    后台代码

    var express=require("express");
    var app=express();
    app.use(express.static("./"));
    app.get('/app/jsonp',function(req,res,next){
    res.setHeader('Access-control-Allow-Origin','*');注意这里*号是所有域名都可以访问,即通配原则,如果要某特定域名访问,可单独设置
    res.send("2")
    });

    app.listen(3022,function(req,res){

    console.log(2)
    })

  • 相关阅读:
    export、export default 和 exports、module.exports 的区别
    RunJS JavaScript及时运行调试工具
    vuecli 中的devServer配置代理
    vue使用pinyin的npm包将文字转为大写首字母
    vue阻止事件冒泡和默认事件
    解决Elementu的 elform 使用 vif校验失灵问题
    calc()使用方法
    element ui 中的 resetFields() 报错'resetFields' of undefined
    vux中的 scroller 组件,在iOS13上,一停止滑动就跳到顶部问题
    elementui的input加单位符号
  • 原文地址:https://www.cnblogs.com/lyz1991/p/5353201.html
Copyright © 2011-2022 走看看