Node和Django中如何进行CORS跨域

一、Node服务端设置跨域：

1、axios不支持jsonp，因为axios的作者觉得jsonp不太友好，推荐用CORS方式更为干净；

2、在使用axios发送请求时，服务器端设置

res.header("Access-Control-Allow-Origin", "*")

可以正确得到结果。

3、实例：

3.1 node.js代码

let express = require("express");
let app = express();
 
app.use("/public", express.static("public"));
 
app.get("/index", function(req, res, next){
    res.sendFile(__dirname + "/" + "views/index.html");
});
 
app.get("/get_data", function(req, res, next){
	res.header("Access-Control-Allow-Origin", "*");
    let response = {
    	title: '在Vue中使用echarts',
    	xAxisData: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
    	seriesData: [10, 26, 16, 20, 16, 30]
    };
    res.type('application/json');
    res.jsonp(response);
});
 
app.listen(8000, function(){
    console.log("开始执行请求");
});

二、Python服务端设置跨域：

django代码：

settings.py中：

(1) 安装 django-cors-headers：

pip install django-cors-headers

(2) 添加到已安装的应用程序中：

INSTALLED_APPS  =（
     ... 
    ' corsheaders '，
     ... 
）

(3) 添加中间件类来收听响应：

MIDDLEWARE  = [
    ... 
    # 跨域请求中间件
    'corsheaders.middleware.CorsMiddleware'，
    'django.middleware.common.CommonMiddleware'，
     ... 
]

注意：要放在中间件（common.CommonMiddleware）的上面，涉及到请求响应的顺序问题。

(4) 跨域配置：

在settings文件最后面添加如下所有代码

# 跨域允许的请求方式，可以使用默认值，默认的请求方式为:
# from corsheaders.defaults import default_methods
CORS_ALLOW_METHODS = (
    'GET',
    'POST',
    'PUT',
    'PATCH',
    'DELETE',
    'OPTIONS'
)

# 允许跨域的请求头，可以使用默认值，默认的请求头为:
# from corsheaders.defaults import default_headers
# CORS_ALLOW_HEADERS = default_headers

CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
)

# 跨域请求时，是否运行携带cookie，默认为False
CORS_ALLOW_CREDENTIALS = True
# 允许所有主机执行跨站点请求，默认为False
# 如果没设置该参数，则必须设置白名单，运行部分白名单的主机才能执行跨站点请求
CORS_ORIGIN_ALLOW_ALL = True

echarts.vue代码：

<template>
  <div>
    <div id="myChart">

    </div>
  </div>
</template>

<script>
  export default {
    methods: {
      drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'));

        this.$axios.get("http://127.0.0.1:8000/get_data")
          .then(function(res){
            // 绘制图表
            myChart.setOption({
              title: { text: res.data.title },
              tooltip: {},
              xAxis: {
                data: res.data.xAxisData
              },
              yAxis: {},
              series: [{
                name: '销量',
                type: 'bar',
                data: res.data.seriesData
              }]
            });
          })
          .catch(function(err){
            console.log(err);
          })
      }
    },
    mounted(){
      this.drawLine();
    }
  }
</script>

<style>
#myChart{
  height: 500px;
}
</style>