ajax跨域

最新推荐文章于 2025-09-07 20:29:08 发布

原创最新推荐文章于 2025-09-07 20:29:08 发布 · 227 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #跨域

读书笔记专栏收录该内容

1 篇文章

订阅专栏

为什么会产生跨域？
答：前端调用后台服务接口的时候，接口不在同域名下便产生了跨域的问题。跨域的三大要素是浏览器的限制、跨域、XHR（XHRHttpRequest）请求，缺一不可，也就是说破坏其中一个因素就可以成功访问到数据

浏览器的限制
浏览器出于安全的考虑，当发现请求是跨域的时候会做一些校验，校验不通过时会报错。控制台打开谷歌浏览器的时候让它忽略web的安全性，跨域是浏览器限制的行为与后台无关，但是让每个用户去设置浏览器属性显然是不可能的，所以该方法无法普遍使用

chrome --disable-web-security --user-data-dir=g:\temp3

JSONP访问
答：jsonp请求中，对应后台中约定的callback，json代码的内容就是callback的值作为函数名，返回的的数据作为函数的参数
动态创建一个script不是xhr，普通的xhr请求返回的是json数据对象，jsonp返回的是一个js脚本，请求URL的不同，请求带有callback字段
缺点：服务器端需要改动。
只支持GET方法。
发送的不是XHR请求，无法使用各种XHR各种优势

$.ajax({
            url: base + "/get1",
            dataType: "jsonp",
            success: function (json) {
                result = json;
            }
        })

跨域——被调用方
答：支持跨域。支持http协议的关于跨域方面的要求来做修改，a域名调用b域名的时候，在b域名返回的信息加入一些字段告诉浏览器允许a域名调用，浏览器通过校验不会报跨域错误。可以服务器端实现，或者NGINX配置或者APACHE配置

header("Access-Control-Allow-Origin: *");

跨域——被调用方
答：隐藏跨域，通过一个代理，从浏览器发出去都是a域名的请求，在代理里面把指定的url转到b域名里面，浏览器看起来是同个域名则不会报错
http服务器的反向代理

server{
    listen 80;
    server_name a.com;
    location/{
        proxy_pass http://localhost:8081/;
    }

    location/ajaxserver{
        proxy_pass http://localhost:8080/test/;
    }
}

这里写图片描述

vue里面解决跨域
changeOrigin参数，接收一个布尔值，如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求，这样就不会有跨域问题了，当然这只适用于开发环境
打开config/index.js,在proxyTable中添写

proxyTable: { 
  '/api': {  //使用"/api"来代替"http://f.apiplus.c" 
    target: 'http://f.apiplus.cn', //源地址 
    changeOrigin: true, //改变源 
    pathRewrite: { 
      '^/api': 'http://f.apiplus.cn' //路径重写 
      } 
  } 
}

使用axios请求数据时直接使用“/api”：

getData () { 
 axios.get('/api/bj11x5.json', function (res) { 
   console.log(res) 
 })

打包部署时

let serverUrl = '/api/'  //本地调试时 
// let serverUrl = 'http://f.apiplus.cn/'  //打包部署上线时 
export default { 
  dataUrl: serverUrl + 'bj11x5.json' 
}