1.跨域报错:
项目目录:
第一步:在vue项目中的跟目录下创建一个 vue.config.js ,文件名是固定的,名字不一样会报错,如果有这个文件就不用新建
第二步: 在vue.config.js里边直接复制粘贴下面这串代码:
devServer: {host:'0.0.0.0', //可以忽略不写port: 8080,//它是用来修改你打开后的端口号的open: true,//值为 true的话,项目启动时自动打开到浏览器里边, false不会打开proxy:{'/api':{target:'http://m.sirfang.com/api',//跨域请求的公共地址ws:false, //也可以忽略不写,不写也不会影响跨域changeOrigin:true, //是否开启跨域,值为 true 就是开启, false 不开启pathRewrite:{'^/api':''//注册全局路径, 但是在你请求的时候前面需要加上 /api}}}},
粘贴后,vue.config.js代码如下:
const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({transpileDependencies: true,devServer: {host: '0.0.0.0', //可以忽略不写port: 8080, //它是用来修改你打开后的端口号的open: true, //值为 true的话,项目启动时自动打开到浏览器里边, false不会打开proxy: {'/api': {target: 'http://localhost:8089', //跨域请求的公共地址ws: false, //也可以忽略不写,不写不会影响跨域changeOrigin: true, //是否开启跨域,值为 true 就是开启, false 不开启pathRewrite: {'^/api': '' //注册全局路径, 但是在你请求的时候前面需要加上 /api}}}}})
第三步:如果你使用的是axios来请求数据的话,需要先下载 axios 包,它分为全局引入和局部引入,全局是在 main.js 里边引,这里我们用的全局引入,不会的小伙伴可以去搜一搜,这里不做讲解。
打开main.js进行全局引入:
import axios from 'axios'Vue.prototype.$http = axios
第四步:在组件中用axios进行请求数据:
async axiosPost() {const { data: res } = await this.$http({url: '/api/userm/we',method: 'post',params: {name: 'admin01',password: 'password'}})console.log(res)}
完成以上一些,就可以实现跨域了,宝贝们快去试试吧!!!