跨域问题Access to XMLHttpRequest at ‘https:/ost?nam‘ from originNo ‘Access-Control-Allow-Origin‘ header

npm install axios -g

首先翻译可得

跨域了  域名 端口 协议  不统一

解决办法  配置解决跨域

创建一个  vue.config.js  文件 （一般这个都需要自己创建）

module.exports = {
    devServer: {
      open: true, //是否自动弹出浏览器页面
      host: "0.0.0.0",  //也可以换成localhost      host: "localhost", 
      port: 8080,
      // https: true,
      hotOnly: false, 
       //以上的ip和端口是我们本机的;下面为需要跨域的
       proxy:{ //配置跨域
          '/api': {
              target: 'https://postman-echo.com/post',   //你的后端端口前部分 ？之前的部分
              changeOrigin: true, // 虚拟的站点需要更管origin     //允许跨域
              pathRewrite: {  
                  '^/api': ''  //请求的时候使用这个api就可以
              }
          }
      },
  },
}

 

 main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

Vue.use(ElementUI)

//引入axios使用
var axios = require('axios')
axios.default.baseURL = '/api'
 
Vue.prototype.$http = axios //正确的使用 


new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

页面代码

<template>
  <div class="img">
  
<el-button type="primary" plain @click="denglu">登录首页</el-button>

  </div>
</template>
<script>
// 引入axios
import axios from 'axios';
  export default {
    data() {
  
    },
    methods: {
      denglu(){
        // 因为我们从新定义了  请求路径所以我们需要改变一下路径  ？以前换成你定义的路径前缀
         axios.post("/api?name=zhou&pass=zhou123") //路径换成真的
        .then(response => {    //监听返回
          console.log(response.data, 'get 正常接口数据请求');
        })
        .catch(error => {
          console.log(error, '失败');
        });
      }
    }
  }
</script>
<style lang="less">
  .img{
    height: 45rem;
    display: flex;
    justify-content: center; /*水平居中*/
    align-items: center; /*垂直居中*/
    background: url('../assets/photo-1684341326866-ad9fdde2314c.webp')center center no-repeat;
    background-size: 100% 100%
  }
</style>

运行 

 --------------------------------------------------------------------------------------------------------------------------------

配置假数据

打开这个软件

 

https://postman-echo.com/get

展示 

使用的时候直接复制上边的路径根据代码改  路径形式

不懂参考  原文文档

构建请求_PostMan中文文档https://postman.org.cn/sending-requests/requests/