从CORS策略阻止从源“ http：// localhost：8000”访问“ https：// URL”处的XMLHttpRequest：

问题描述

我正在尝试借助API从vue axios另一个网站获取数据。但是我遇到了这个错误

Access to XMLHttpRequest at 'https:URL' from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我使用vue cors库，但无法正常工作

import Vue from 'vue'
import axios from 'axios';
import {api} from "../../config";
import AxiosPlugin from 'vue-axios-cors';
Vue.use(AxiosPlugin)
export default {
  data () {
    return {
      selected: [],e7: [],projects: [],urls:['/api/abc','api/212'],apis:[]


    }
  },methods:{
    getTickets(){
      const headers = {
        'Content-Type': 'text/plain'
      };

      this.$axios.get(this.selected+'api/tickets/fetch_tickets').then((res)=>{
      console.log(res.data)
      })
    }
  }

}

解决方法

如果未正确设置CORS配置，则浏览器控制台将显示类似“跨源请求已阻止”的错误。这用于显式允许某些跨域请求，同时拒绝其他请求。例如，如果某个网站提供可嵌入的服务，则可能有必要放宽某些限制。

我们通常在后端处理此配置，但是您可以通过在Chrome浏览器中添加Allow-Control-Allow-Origin并在其中添加本地主机来解决此问题。还有一个类似的问题可能会帮助您解决问题：

how to fix 'Access to XMLHttpRequest has been blocked by CORS policy' Redirect is not allowed for a preflight request only one route

api api axios vue.js