Question

我的Vue项目位于此网址“ http://localhost:8081/”中。

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

但是当我打电话时，出现这样的错误

无法加载http://localhost:8082/Fleet-App/api/deptList：对预检请求的响应未通过访问控制检查：所请求的资源上没有'Access-Control-Allow-Origin'标头。因此，不允许访问原始“ http://localhost:8081” ***”。

请帮助我解决此问题。

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标头来响应您的请求。如果缺少Access-Control-Allow-Origin，则CORS请求将失败。

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

https://www.html5rocks.com/en/tutorials/cors/ https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

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

希望这会有所帮助！

Vuejs与Axios-使用get请求时出现“跨域”错误

1 个答案: