AJAX请求以及解决跨域问题详解

2024-08-27 02:35:35

AJAX 介绍

AJAX其实就是异步的js和xml

通过ajax可以在浏览器中发送异步请求。

最大优势：无刷新获取数据

优点：

1.可以无需刷新页面与服务器进行通信

2.允许根据用户事件更新部分页面内容

当然也存在其缺点问题：比如跨域问题等！

一.原生AJAX请求(GET)

由于get和post请求类似，原生代码相比jQuery复杂一些：原生代码演示get请求 jquery演示get和post请求

代码中会出现node.js的相关代码，比如express框架，对node.js不熟悉的同学可以先注重前端代码
前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> GET 请求</title>
    <style>
        #result{
            width: 100px;
            height: 100px;
            border:  1px solid pink;
        }
    </style>
</head>
<body>
    <button class="btn">发送请求</button>
    <div id="result"></div>
    <script>
        var btn=document.querySelector(".btn")
        const result=document.getElementById("result")
        btn.addEventListener("click",function(){
            //1.创建对象
            const xhr=new XMLHttpRequest()
            //2.初始化 设置请求方法和url
            xhr.open("GET","http://127.0.0.1:3000/server?a=100&b=200");//?后面是get请求加参数方法
            //3.发送
            xhr.send()
            //4.事件绑定 处理服务端返回的结果
            xhr.onreadystatechange=function(){
                if(xhr.readyState===4){
                    //判断响应状态码
                    if(xhr.status>=200 && xhr.status<=300){
                        console.log(xhr.status);//状态码
                        console.log(xhr.statusText);//状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体

                        result.innerHTML=xhr.response//把响应结果给div盒子
                    }
                }

            }

        })
    </script>
</body>
</html>

服务端代码

const express=require("express")
const app = express();
//1.对应get请求
 app.get("/server",(req,res)=>{
    //设置响应头
    res.setHeader("Access-Control-Allow-Origin","*")
    //这里设置响应头允许所有域都具有访问资源的权限。
    //不设置就存在跨域问题，访问不到，后面我们会介绍另外一种比较简单的解决方法
    //设置响应体
    res.send("hello GET-AJAX")
 })

app.listen(3000,()=>{
    console.log("服务启动");
})

二.jQuery AJAX请求(GET 和POST)

先了解一下jQuery中AJAXGET请求和POST请求语法：

get 请求
$.get(url, [data], [callback], [type])
url:请求的 URL 地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式，xml, html, script, json, text，_default。

post 请求
$.post(url, [data], [callback], [type])
url:请求的 URL 地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式，xml, html, script, json, text,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery 发送 AJAX 请求</title>
    <script
      crossorigin="anonymous"
      src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"
    ></script>
  </head>
  <body>
      <button >GET</button>
      <button >POST</button>
    <script>
        //jQuery发送AJAX请求 -get请求
      $("button").eq(0).click(function () {
          $.get("http://127.0.0.1:5000/jquery-server", { a: 1, b: 2 }, (data) => {
              console.log(data);
            },"json"
          );
        });
        //jQuery发送AJAX请求 -post请求
      $("button").eq(1).click(function () {
          $.post( "http://127.0.0.1:5000/jquery-server", { a: 1, b: 2 },(data) => {
              console.log(data);
            }, "json"
          );
        });

    </script>
  </body>
</html>

服务端代码：

这里使用app.all()使得所有请求方法都可以访问

const express = require('express');
const app = express();
//jQuery 服务  这里使用app.all()使得所有请求方法都可以访问
app.all('/jquery-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX get');
    const data = {name:'小吴同学'};
    response.send(JSON.stringify(data));
});
//4. 监听端口启动服务
app.listen(5000, () => {
    console.log("服务启动");
});

三.跨域问题的解决

跨域问题：当我们的浏览器从一个域名的网页去请求另一个域名的资源时，其中域名、端口、协议任一不同，都是属于跨域

示范例子

前端请求代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CORS</title>
    <style>
        #result{
            width:200px;
            height:100px;
            border:solid 1px pink;
        }
    </style>
</head>
<body>
    <button class="btn">发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.querySelector('.btn');
        btn.onclick = function(){
            const xhr = new XMLHttpRequest();
            xhr.open("GET", "http://127.0.0.1:5000/server");
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        //输出响应体
                        console.log(xhr.response);
                        result.innerHTML=xhr.response
                    }
                }
            }
        }
    </script>
</body>
</html>

服务端我介绍两种简单且效率极高的方法解决跨域问题

1.在服务端设置header

const express = require('express');
const app = express();
app.all('/server', (request, response)=>{
    //设置响应头方法
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", '*');
    response.setHeader("Access-Control-Allow-Method", '*');
    response.send('设置响应头解决跨域问题成功');
});
app.listen(5000, () => {
    console.log("服务启动");
});

2.使用中间件cors

const express = require('express');
const app = express();
//使用cors中间件方法
const cors=require("cors")
app.use(cors())

app.all('/server', (request, response)=>{
    response.send('使用cors中间件解决跨域问题成功');
});
app.listen(5000, () => {
    console.log("服务启动");
});

这里给大家具体讲一下cors中间件使用步骤

1.在终端使用 npm i cors 命令下载这个中间件

2.使用require导入cors中间件：const cors=require(“cors”)

3.用app.use()方法注册中间件：app.use(cors()) 注意：这个注册方法一定要写在在配置路由之前

四.其他解决跨域问题方法

一.JSONP跨域

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，只支持get请求(具有局限性)

工作原理：JSONP 就是利用 script 标签的跨域能力来发送请求的。

二.nginx反向代理

大致解释：

www.A.com/index.html需要调用www.B.com/server.js，可以写一个中间接口www.A.com/server.js，靠着这个接口在服务端

去调用www.B.com/server.js并拿到返回值，然后再返回给index.html

这个方法一般很少使用，它可以不用目标服务器与前端配合，但是需要搭建一个中转nginx服务器，用于转发请求。

总结

到此这篇关于AJAX请求以及解决跨域问题的文章就介绍到这了,更多相关AJAX请求及解决跨域内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

JQuery Ajax执行跨域请求数据的解决方案

今天前端因为需要ajax调用两个不同的项目,请求域不一样,所以涉及ajax跨域的问题 ,其实很简单,具体如下原来的ajax请求如下: $.ajax({ type:"post", url:platformUrl +"/security/modifyPwd.do", data:$('#updatepwdform').serialize(), dataType:"json", success:function(data){ $("#upda
ajax请求前端跨域问题原因及解决方案

目录一.跨域是怎么形成的二.导致跨域的根本原因三.解决方法 1 .JSONP 2. CORS 3 .代理转发一.跨域是怎么形成的当我们请求一个url的协议.域名.端口三者之间任意一个与当前页面url的协议.域名.端口不同这种现象我们把它称之为跨域跨域会导致: 1.无法读取非同源网页的 Cookie.LocalStorage 和 IndexedDB 2.无法接触非同源网页的 DOM 3.无法向非同源地址发送 AJAX 请求(可以发送,但浏览器会拒绝接受响应) 二.导致跨域的根本原因
Ajax请求跨域问题解决方案分析

本文实例讲述了Ajax请求跨域问题解决方案.分享给大家供大家参考,具体如下: 几乎每种浏览器都存在默认的安全机制,都有同源策略,因为浏览器恶意的把每个外部请求的都当做是黑客攻击,相当于是对自身的保护,所以浏览器在运行脚本时会判断脚本与请求的页面是否是同一来源,这个同一来源,包括1.协议,2.地址,3.端口,只有三者都相同才被认为是同一来源. 一.解决方案: 1,在服务器端的响应头中添加一个http参数: res.setHeader("Access-Control-Allow-Origin&quo
AJAX请求以及解决跨域问题详解

目录 AJAX 介绍一.原生AJAX请求(GET) 二.jQuery AJAX请求(GET 和POST) 三.跨域问题的解决四.其他解决跨域问题方法总结 AJAX 介绍 AJAX其实就是异步的js和xml 通过ajax可以在浏览器中发送异步请求. 最大优势:无刷新获取数据优点: 1.可以无需刷新页面与服务器进行通信 2.允许根据用户事件更新部分页面内容当然也存在其缺点问题:比如跨域问题等! 一.原生AJAX请求(GET) 由于get和post请求类似,原生代码相比jQuery复杂一些:
Angular4开发解决跨域问题详解

1.跨域浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了. 上面提到的,同域的概念又是什么呢??? 简单的解释就是相同域名,端口相同,协议相同同源策略: 请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同. 比如:我在本地上的域名是study.cn,请求另外一个域名一段数据,这个时候在浏览器上会报错,这个就是同源策略的保护,如果浏览器对javascri
Vue如何解决跨域问题详解

什么是跨域跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据.源指协议,端口,域名.只要这个3个中有一个不同就是跨域. 这里列举一个经典的列子: #协议跨域http://a.baidu.com访问https://a.baidu.com:#端口跨域http://a.baidu.com:8080访问http://a.baidu.com:80:#域名跨域http://a.baidu.com访问http://b.baidu.com: 通常在不同服务器访问过程中可能会遇到跨域问题,也就是口头上常说
如何使用Nginx解决跨域问题详解

目录先来说一下什么是同源策略什么是跨域? 跨域分类 Nginx解决跨域问题解释 1.Access-Control-Allow-Origin 2.Access-Control-Allow-Headers 是为了防止出现以下错误: 3.Access-Control-Allow-Methods 是为了防止出现以下错误: 4.给OPTIONS 添加 204的返回,是为了处理在发送POST请求时Nginx依然拒绝访问的错误预检请求(preflight request) 尾声先来说一下什么是同源策
利用Nginx反向代理解决跨域问题详解

问题在之前的分享的跨域资源共享的文章中,有提到要注意跨域时,如果要发送Cookie,Access-Control-Allow-Origin就不能设为*,必须指定明确的.与请求网页一致的域名.在此次项目开发中与他人协作中就遇到此类问题. 解决思路一般来说,与后台利用CORS跨域资源共享将Access-Control-Allow-Origin设置为访问的域名即可,这个需要后台的配合,且有些浏览器是不支持的. 基于与合作方后台的配合,利用nginx方向代理来满足浏览器的同源策略来实现跨域实现方法
Ajax解决跨域之设置CORS响应头实现跨域案例详解

1.设置CORS响应头实现跨域跨源资源共享(CORS) 1.1 什么是CORS CORS(Cross-Origin Resource Sharing),跨域资源共享.CORS 是官方的跨域解决方案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持 get 和 post 请求.跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源 1.2 CORS 怎么工作的? CORS 是通过设置一个响应头来告诉浏览器,该请求允许跨域,浏览
Vue axios与Go Frame后端框架的Options请求跨域问题详解

跨域问题可从前后两端分开排查: 前端:Vue + axios axios 请求头使用 'Content-Type': 'application/json', 并且在Header中设置了 Authorization 字段用于传递 Token, 参数未经 Qs 转码, 使用以下代码测试登录接口: // 为方便操作,已将 axios 实例挂载到 this.$axios 上 this.$axios.post('/signin', {account: '', password: ''}) .then(re
前端跨域问题解决及七大跨域原理详解

目录为什么跨域? 跨域的时机? 同域情况 && 跨域情况? 解决跨域的方案 JSONP WebSocket Cors Node接口代理 Nginx postMessage document.domain && iframe 咱们做前端的,平时跟后端对接接口那是必须的事情,但是可能很多同学忽略了一个对接过程中可能会发生的问题——跨域,那跨域到底是啥呢?为什么会跨域呢?又怎么才能解决呢? 为什么跨域? 为什么会出现跨域问题呢?那就不得不讲浏览器的同源策略了,它规定了协议号-域
vue使用代理解决请求跨域问题详解

在日常开发中,我们前端必不可少的需要像后端请求数据. 但是一般前后端分离,所以域名.端口等肯定不尽相同,这样就不可避免的会遇到浏览器的同源策略限制. 在一般情况下,后端都会设置请求跨域允许的来源.方法等. 但是也保不准后端疏忽而忘记这个问题. 那为了不影响我们的开发,前端只能被动的去找后端解决跨域问题. 其实,我们前端也可以解决跨域问题,那就是使用代理. 举个例子: 我请求的地址是这个:http://192.168.12.36:9000/api/SourceManager 但是我本地的vue项目
Vue-cli proxyTable 解决开发环境的跨域问题详解

和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了一堆参数,最后还得我把自己的localhost映射成上线时将要使用的域名. 今天翻看代码时,突然发现vue-cli的config文件里有一个参数叫proxyTable,看这个名字就感觉能解决问题,于是我就去搜了一下,果然.在vuejs-templates,也就是vue-cli的使用的模板插件里,有关于API proxy的说明,使用的就是这个参数. https://vuejs-t