欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-03 22:08:07
...

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

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

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

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

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

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

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

引用原文链接地址: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源码

  1. import Vue from 'vue'
  2. import App from './App'
  3. import axios from 'axios'
  4. import ElementUI from 'element-ui'
  5. import 'element-ui/lib/theme-chalk/index.css'
  6. import './assets/style/global.css'
  7. import qs from 'qs'
  8. Vue.config.productionTip = false
  9. // 注册axios变量
  10. Vue.prototype.$axios = axios
  11. // 注册后端域名变量
  12. Vue.prototype.$host = 'http://www.test.cn/index.php/'
  13. // 使用element-ui组件
  14. Vue.use(ElementUI)
  15. //添加请求拦截器
  16. axios.interceptors.request.use(function (config) {
  17. config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
  18. if(config.method === 'post') { // post请求时,处理数据
  19. config.data = qs.stringify( {
  20. ...config.data //后台数据接收这块需要以表单形式提交数据,而axios中post默认的提交是json数据,所以这里选用qs模块来处理数据,也有其他处理方式,但个人觉得这个方式最简单好用
  21. })
  22. }
  23. return config;
  24. }, function (error) {
  25. loadinginstace.close()
  26. return Promise.reject(error);
  27. })
  28. //添加响应拦截器
  29. axios.interceptors.response.use(function(response){
  30. return response;
  31. },function(error){
  32. return Promise.reject(error);
  33. });
  34. /* eslint-disable no-new */
  35. new Vue({
  36. el: '#app',
  37. components: { App },
  38. template: '<App/>'
  39. })

⑤vue模板源码:

  1. <template>
  2. <div id="detailsaildate">
  3. <el-row>
  4. <el-col :span="6"><h3>详细船期查询</h3></el-col>
  5. </el-row>
  6. <el-row>
  7. <el-col :span="12" :offset="1">
  8. <el-form :inline="true" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px">
  9. <el-form-item prop="pol">
  10. <el-select v-model="ruleForm.pol" placeholder="请选择起运港">
  11. <el-option label="QINGDAO(青岛)" value="QINGDAO"></el-option>
  12. </el-select>
  13. </el-form-item>
  14. <el-form-item>
  15. <i class="el-icon-right"></i>
  16. </el-form-item>
  17. <el-form-item prop="podd">
  18. <el-select v-model="ruleForm.podd" placeholder="请选择目的港">
  19. <el-option v-for="(pod,index) in pods" :label="pod.port_en+'('+pod.port_cn+')'" :value="pod.port_en" :key="index"></el-option>
  20. </el-select>
  21. </el-form-item>
  22. <el-form-item>
  23. <el-button type="primary" icon="el-icon-search" @click="submitForm('ruleForm')">搜索</el-button>
  24. </el-form-item>
  25. </el-form>
  26. </el-col>
  27. </el-row>
  28. </div>
  29. </template>
  30. <script>
  31. export default {
  32. name: 'Detailsaildate',
  33. data() {
  34. return {
  35. pods: [
  36. {port_en:'PORT KELANG W',port_cn:'巴生西'},
  37. {port_en:'PORT KELANG N',port_cn:'巴生北'},
  38. ],
  39. ruleForm: {
  40. pol: '',
  41. podd: '',
  42. },
  43. param:'',
  44. rules: {
  45. pol: [
  46. {required: true, message: '请选择起运港', trigger: 'change'}
  47. ],
  48. podd: [
  49. {required: true, message: '请选择目的港', trigger: 'change'}
  50. ]
  51. }
  52. }
  53. },
  54. created () {
  55. this.$axios.get(this.$host + 'api/getpods').then(res => {
  56. const data = res.data
  57. for(var i=0,len=data.length;i<len;i++){
  58. data[i].port_en=data[i].port_en.toUpperCase();
  59. this.pods.push(data[i]);
  60. }
  61. })
  62. .catch(res => {
  63. console.log(res)
  64. })
  65. },
  66. methods: {
  67. submitForm(formName) {
  68. var that=this;
  69. this.$refs[formName].validate((valid) => {
  70. if (valid) {
  71. let data = {
  72. poll:"QINGDAO",pod:"dalian"
  73. };
  74. that.$axios.post(this.$host + 'api/saildate',data).then(res=>{
  75. alert(res.data.port_code);
  76. })
  77. } else {
  78. console.log('error submit!!');
  79. return false;
  80. }
  81. });
  82. },
  83. }
  84. }
  85. </script>

⑥get和post请求的后端方法

  1. public function getpods(){
  2. $data=FivPort::distinct(true)->field('port_en,port_cn')->select();
  3. return json($data);
  4. }
  5. public function saildate(Request $request){
  6. $pol=$request->param('poll');
  7. $port_code=FivPort::where('port_en',$pol)->field('port_code')->find();
  8. $data=json($port_code);
  9. return $data;
  10. }

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