Axios、跨域问题

原创

已于 2022-07-31 12:52:23 修改 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #服务器 #javascript

于 2022-02-20 17:24:46 首次发布

本文介绍了Ajax的基本原理，包括异步访问特点，以及使用Axios进行前后端交互的GET和POST请求案例。接着详细讨论了浏览器的同源策略，通过多个案例解释了何为跨域访问，并提出了CORS作为现代跨域解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1.Axios
2.跨域问题

1.Axios

1.1Ajax简介

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML)，使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
功能和作用: Ajax主要实现前后端交互.提高用户页面与服务器之间交互效率。
特点: 局部刷新,异步访问

1.2Ajax异步原理

组成部分:

用户
Ajax引擎–代理
服务器

异步的特点：

由Ajax引擎直接访问后端服务器。
在回调函数没有执行之前，用户可以执行自己的任务。

1.3前后端交互

1.3.1GET请求案例

1.get请求

package com.jt.controller;

import com.jt.pojo.User;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin    //主要解决跨域问题
@RequestMapping("/axios")
public class AxiosController {
   
   
    /**
     * URL地址:  http://localhost:8080/axios/getUserById?id=100
     * 参数:     id = 100
     * 返回值:  User对象的JSON   伪造一个User对象
     */
    @RequestMapping("/getUserById")
    public User getUserById(Integer id){
   
   
        //根据ID查询数据库
        User user = new User();
        user.setId(id);
        user.setName("好好学习");
        user.setAge(1000);
        user.setSex("男");
        return user;
    }
}

/**
			 * var 关键字 没有作用域的概念!!!!
			 * let 相当于var 有作用域 更加安全.
			 * const 定义常量的
			 * 关于axios数据返回值对象的说明:
			 * 		axios为了接收后端服务器数据,利用promise对象
			 * 		封装参数
			 */
			let url1 = "http://localhost:8080/axios/getUserById?id=100"	
			axios.get(url1)
				 .then(function(promise){
   
   
					 console.log(promise.data)
				 }