vue页面使用axios报跨域错误

原创

鱼弦CTO 2024-06-04 22:49:54 博主文章分类：基础 ©著作权

文章标签 ios 跨域 Vue 文章分类 Vue.js 前端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者鱼弦CTO的原创作品，请联系作者获取转载授权，否则将追究法律责任

鱼弦：公众号：红尘灯塔，CSDN博客专家、内容合伙人、CSDN新星导师、51CTO(Top红人+专家博主) 、github开源爱好者（go-zero源码二次开发、游戏后端架构 https://github.com/Peakchen）

Vue 页面使用 Axios 报跨域错误

1. 简介
Axios 是一个基于 Promise 的 HTTP 客户端，用于在浏览器和 Node.js 中发送 HTTP 请求。在 Vue 页面中使用 Axios 可以方便地进行数据的获取和发送，但有时会出现跨域错误。

在 Vue 项目中，使用 Axios 发起跨域请求时，可能会遇到以下错误：

Error: Request has been blocked by CORS policy: No 'Access-Control-Allow-Origin' heade

vue页面使用axios报跨域错误_Vue

2. 原理详解
跨域错误是由浏览器的同源策略引起的安全限制。同源策略要求网页的 JavaScript 只能访问与其本身来源相同的服务器资源。如果 Vue 页面中的 Axios 请求的目标服务器与页面的原始服务器不在同一个域下（协议、域名、端口号任意一个不同），浏览器就会拦截该请求并报跨域错误。

3. 应用场景解释
跨域问题通常出现在以下场景中：

前后端分离开发：当前端使用 Vue 开发，而后端使用不同域名或端口的服务器时，前端请求后端接口可能触发跨域错误。
API 调用：当 Vue 页面需要调用外部的 API 接口时，如果该 API 接口不支持跨域访问，就会导致跨域错误。

跨域请求在以下场景中很常见：

从一个域名下的 Web 应用程序请求另一个域名下的 API
从一个 Web 应用程序请求另一个 Web 应用程序的资源

4. 算法实现
解决跨域问题有多种方法，常用的方法是在后端服务器设置允许跨域访问的响应头。例如，在后端服务器中设置以下响应头字段：

// Java Servlet 示例
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
response.setHeader("Access-Control-Allow-Headers", "Content-Type");

vue页面使用axios报跨域错误_Vue_02

为了解决跨域问题，可以使用以下几种方法：

使用 CORS
使用 JSONP
使用代理服务器

5. 代码示例详细实现
以下是一个 Vue 页面中使用 Axios 的示例代码，同时处理跨域问题：

<template>
  <div>
    <button @click="getData">获取数据</button>
    <p>{{ responseData }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      responseData: '',
    };
  },
  methods: {
    getData() {
      axios.get('http://api.example.com/data')
        .then(response => {
          this.responseData = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
  },
};
</script>

vue页面使用axios报跨域错误_跨域_03

以下是一个使用 CORS 解决跨域问题的示例：

服务端代码

@SpringBootApplication
public class ExampleApplication {

    public static void main(String[] args) {
        SpringApplication.run(ExampleApplication.class, args);
    }

    @GetMapping("/api")
    public String getApi() {
        return "Hello World!";
    }
}

vue页面使用axios报跨域错误_Vue_04

客户端代码

import Vue from 'vue';
import axios from 'axios';

new Vue({
    el: '#app',
    data: {
        message: ''
    },
    mounted() {
        axios.get('http://localhost:8080/api')
            .then(response => {
                this.message = response.data;
            })
            .catch(error => {
                console.log(error);
            });
    }
});

vue页面使用axios报跨域错误_ios_05