vue 解决跨域问题

报错：

前台控制台报一下错：

Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/chouti/book/' from origin 'http://localhost:8

修改的地方有：

后端：

备注：这里采用的python django进行开发的（只适用这种环境 思路可以借鉴）

Django 报错，跨域请求出现问题。

在settings.py中添加

#设置可跨域范围（注意位置）

CORS_ALLOW_CREDENTIALS = True

CORS_ORIGIN_ALLOW_ALL = True

#定义跨域中间件（注意位置）

'corsheaders.middleware.CorsMiddleware',

前端：

备注：这里采用的是vue2进行开发，还需要特别说明的是我对axsio进行了封装

即大家常说的request.js 封装代码如下：

import Vue from 'vue'

import axios from "axios";

Vue.config.productionTip=false;
Vue.prototype.axios=axios;

const http=axios.create({
    baseURL:"http://127.0.0.1:8000/api", #这是对api所在的服务进行请求获得数据
    timeout:10000,
    withCredentials: true,
    headers: {
     'Content-Type': 'application/json; charset=utf-8'
   }
});
http.interceptors.request.use(function (config) {
    return config;

},function (error) {
    return Promise.reject(error)

});

http.interceptors.response.use(function (response) {
    return response;

},function (error) {
    return Promise.reject(error)

});
export default http
 

  
 

对api也进行封装（如有多个按照这种模式往下写即可）

import http from "@/axsio/axsio";
export  const  getdata=()=>{
    return http.get('/chouti/book/')#这是对我们要请求的接口的详细地址
}

在vue.config.js中加入了这些代码：

module.exports={
  devServer:{
    proxy:{
      '/api':{
        target:"http://127.0.0.1:8000/api",
        changeOrigin:true,
        pathRewrite:{
          '/api':""
        }
      }
    }
  }
}

在main.js中引入这一行

axios.defaults.baseURL='/api'; //对与跨域问题 用vue.config.js解决 这是重要代码

转载：https://blog.csdn.net/testManger/article/details/128378680