axios跨域请求，post总是报错No ‘Access-Control-Allow-Origin’ ，get可以成功请求到数据

可能是发送的数据格式不对，需要添加头信息（content-type）。引入qs插件，用qs转变数据格式。
方法一：在vue的项目入口文件main.js中，引入我们所需要axios(已经封装好的ajax，也可以用fetch，但是兼容性不如axios好)，同时需要引入qs模块(我们在做post请求的时候需要用到)

import axios from 'axios' // 引入axios 
import qs from 'qs' // 引入qs
Vue.prototype.$http = axios;
Vue.prototype.HOST = '/api' // 此处可根据个人习惯设置 此处的‘api’ 跟index.js中的‘api’一致，则所有的请求只需要使用this.HOST即可
//添加请求拦截器
axios.interceptors.request.use(function (config) {
  config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
  if(config.method === 'post') { // post请求时，处理数据
      config.data = qs.stringify( {
          ...config.data //后台数据接收这块需要以表单形式提交数据，而axios中post默认的提交是json数据,所以这里选用qs模块来处理数据，也有其他处理方式，但个人觉得这个方式最简单好用
      })
  } 
  return config;
}, function (error) {
  loadinginstace.close()
  return Promise.reject(error);
})
//添加响应拦截器
axios.interceptors.response.use(function(response){
  return response;
},function(error){
 return Promise.reject(error);
});

在vue文件中的使用方法，get与post方法均可~

// 以下为请求测试环境的get接口测试
  this.$http.get(this.HOST + '/init',{
    params:{
      "cityCode":"010"
    }
  }).then((response) =&gt; {
    console.log("get:"+response.data);
  });
  // 以下为请求测试环境的post接口测试 处理数据这块儿，试用过很多种方法，没效果…… 例如 用字符串拼接，以及用params.append,亲测数据丢失，嗯，还是乖乖的用qs吧……
  let url = this.HOST + '/mod';
  let data = {
    "savestatus":1,"favType":1,"tag":"danny"
  };
  this.$http.post(url,data).then((response) =&gt; {
      console.log("post:"+response.data);
  })
  // 以下为请求本地json文件的方法，本地json文件必须放在最外层的static/xxx.json
  this.$http.get("../static/datagrid_data1.json").then(response =&gt; {  
    console.log("static:"+response.data); 
  });

引用原文链接地址：https://www.cnblogs.com/lalalagq/p/9917072.html

方法二：在post请求中直接添加header,并使用qs转换数据格式

import qs from 'qs';
axios.post('/api/xxx/xxx/xxx?'+qs.stringify(newChild),
                    {
                        headers:{
                            "Content-Type":'application/x-www-form-urlencoded;charset=UTF-8'
                        }
                }).then(res=>{
                    console.log(res);
                }).catch(err=>{
                    console.log(err);
                })

引用原文链接地址：https://blog.csdn.net/qq_33518543/article/details/83412607

备注：
①vue安装qs的方法：在terminal终端输入：npm install qs
②查看qs是否安装成功的方法：打开vue项目根目录下的package.json,如果安装成功dependencies中会有qs和qs的版本：”qs”: “^6.10.1”
③我在用第一种方法，安装完qs，测试的时候又报出没有vue-router的错误，于是又安装了vue-router,安装方法：npm install vue-router—save
④main.js源码

import Vue from 'vue'
import App from './App'
import axios from 'axios'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import './assets/style/global.css'
import qs from 'qs'
Vue.config.productionTip = false
// 注册axios变量
Vue.prototype.$axios = axios
// 注册后端域名变量
Vue.prototype.$host = 'http://www.test.cn/index.php/'
// 使用element-ui组件
Vue.use(ElementUI)
//添加请求拦截器
axios.interceptors.request.use(function (config) {
  config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
  if(config.method === 'post') { // post请求时，处理数据
    config.data = qs.stringify( {
      ...config.data //后台数据接收这块需要以表单形式提交数据，而axios中post默认的提交是json数据,所以这里选用qs模块来处理数据，也有其他处理方式，但个人觉得这个方式最简单好用
    })
  }
  return config;
}, function (error) {
  loadinginstace.close()
  return Promise.reject(error);
})
//添加响应拦截器
axios.interceptors.response.use(function(response){
  return response;
},function(error){
  return Promise.reject(error);
});
/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

⑤vue模板源码：

<template>
  <div id="detailsaildate">
    <el-row>
      <el-col :span="6"><h3>详细船期查询</h3></el-col>
    </el-row>
    <el-row>
      <el-col :span="12" :offset="1">
        <el-form :inline="true" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px">
          <el-form-item prop="pol">
            <el-select v-model="ruleForm.pol" placeholder="请选择起运港">
              <el-option label="QINGDAO(青岛)" value="QINGDAO"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <i class="el-icon-right"></i>
          </el-form-item>
          <el-form-item prop="podd">
            <el-select v-model="ruleForm.podd" placeholder="请选择目的港">
              <el-option v-for="(pod,index) in pods" :label="pod.port_en+'('+pod.port_cn+')'" :value="pod.port_en" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="submitForm('ruleForm')">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'Detailsaildate',
  data() {
    return {
      pods: [
        {port_en:'PORT KELANG W',port_cn:'巴生西'},
        {port_en:'PORT KELANG N',port_cn:'巴生北'},
      ],
      ruleForm: {
        pol: '',
        podd: '',
      },
      param:'',
      rules: {
        pol: [
          {required: true, message: '请选择起运港', trigger: 'change'}
        ],
        podd: [
          {required: true, message: '请选择目的港', trigger: 'change'}
        ]
      }
    }
  },
  created () {
    this.$axios.get(this.$host + 'api/getpods').then(res => {
      const data = res.data
      for(var i=0,len=data.length;i<len;i++){
        data[i].port_en=data[i].port_en.toUpperCase();
        this.pods.push(data[i]);
      }
    })
      .catch(res => {
        console.log(res)
      })
  },
  methods: {
    submitForm(formName) {
      var that=this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            poll:"QINGDAO",pod:"dalian"
          };
          that.$axios.post(this.$host + 'api/saildate',data).then(res=>{
                alert(res.data.port_code);
            })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}
</script>

⑥get和post请求的后端方法

public function getpods(){
       $data=FivPort::distinct(true)->field('port_en,port_cn')->select();
       return json($data);
}
public function saildate(Request $request){
      $pol=$request->param('poll');
      $port_code=FivPort::where('port_en',$pol)->field('port_code')->find();
      $data=json($port_code);
      return $data;
}

⑦后端跨域路由配置
Route::rule(‘api/getpods’,’index/api/getpods’)->allowCrossDomain();
Route::rule(‘api/saildate’,’index/api/saildate’)->allowCrossDomain();

更多相关文章

随机推荐