带有 Axios 的 Vuejs - 使用获取请求时出现“跨源”错误

Question

我的vue项目就在这个url《http://localhost:8081/》。

我想连接到另一个 url“http://localhost:8082/Fleet-App/api/deptList”中的后端。

但是当我打电话时，我收到这样的错误

Failed to load http://localhost:8082/Fleet-App/api/deptList: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access***".

请帮我解决这个问题。

sample.vue

<template>
 <b-card>
    <h5 class="card-title">Outside Order</h5>
    <hr>
     <div class="form-group row">
    <label for="" class="col-sm-2 col-form-label">Order #</label>
    <div class="col-sm-2">
     <input class="form-control" type="text" placeholder="Default input">
    </div>

    <label for="" class="col-sm-2 col-form-label">Order Type</label>
    <div class="col-sm-2">
      <select class="form-control">
        <option>Bulk</option>
        <option>Container</option>
      </select>
    </div>

     <label for="" class="col-sm-2 col-form-label">Status</label>
    <div class="col-sm-2">
      <select class="form-control">
        <option>Active</option>
        <option>In-Active</option>
      </select>
    </div>
  </div>

  <div class="form-group row">
    <label for="" class="col-sm-2 col-form-label">Order Date</label>
    <div class="col-sm-2">
     <input class="form-control" type="text" placeholder="DD-MMM-YYYY">
    </div>
  </div>
 </b-card>
</template>

<script>
import {AXIOS} from '../../components/http-common'

export default {
  name: 'order',
  mounted(){
     AXIOS.get('/deptList')
      .then(response => {
        console.log(JSON.stringify(response.data))
      })
      .catch(e => {
        this.errors.push(e)
      })
   }
}
</script>

http-common.js

import axios from 'axios'

const API_URL = process.env.API_URL || 'http://localhost:3000/api/v1'

export const AXIOS = axios.create({
  baseURL: `http://localhost:8082/Fleet-App/api/`,
  withCredentials: false,
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + localStorage.token,
    'Access-Control-Allow-Origin': '*',
    'Accept' : 'application/json, text/plain, */*',
    'Access-Control-Allow-Methods' : 'GET, PUT, POST, DELETE, OPTIONS',
    'Access-Control-Allow-Credentials' : true
  }
})

提前致谢。

Answer 1

您的服务器似乎没有包含 Access-Control-Allow-Origin header 来响应您的请求。如果缺少 Access-Control-Allow-Origin，CORS 请求将失败。

以下是一些解释 CORS 工作原理的有用文章：

基本上，问题出在服务器上，而不是在您的 vue.js 客户端

希望对您有所帮助！

带有 Axios 的 Vuejs - 使用获取请求时出现“跨源”错误

Vuejs with Axios - getting ''cross-origin" error when using get request

cors

vue.js

axios

vuejs2