1.1、怎么判断是否跨域?
这就是需要用跨域来请求数据的报错
第一步: 在vue项目中的跟目录下创建一个 vue.config.js ,文件名是固定的,不一样就会报错
第二步: 在vue.config.js里边直接复制下面这串代码即可
module.exports = {
publicPath: '/' //项目访问文件路径的方式,此为绝对路径,可以忽略不写。
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文件一定要重启/重跑项目,重新npm run serve.
坑死我了我淦
第三步:如果你使用的是axios来请求数据的话,需要现在下载 axios ,它分为全局引入和局部引入,全局是在 main.js 里边引
第四步:在组件中进行请求数据的写法。
或者你自己封装了一个接口文件。
项目的大概标准格式为如图,base是封装请求方法的,index是封装接口文件的,可自命名。
base.js
index.js
扫描二维码关注公众号,回复:
15919281 查看本文章
base.js 把接口公共地址替换后成如图
这样项目请求接口的时候就会自动实现跨域了。
注意:api前面的斜杠很重要,如果不写这个斜杠,会被浏览器判断为是直接访问本地地址加接口然后提示接口404错误找不到接口,直接会访问loaclhost+文件根目录+接口地址。如http://localhost:8080/pages/index/api/t/wtdk/mobileVerifyApi
而使用开头的斜杠会访问:http://localhost:8080/api/t/wtdk/mobileVerifyApi
延申错误避坑:当我们写接口地址并且不使用跨域的时候,有的项目直接使用 ip 公共地址,如:192.168.127.0,拼接接口的时候很多人会大意写成192.168.127.0:8080/t/wtdk/mobileVerifyApi,因为开头没有/,会被浏览器判断成直接访问localhost:8080/***/192.168.127.0:8080/t/wtdk/mobileVerifyApi,导致接口404错误,所以其实是你忘了写http://,正确写法http://192.168.127.0:8080/t/wtdk/mobileVerifyApi,http://与 “/” 同理。在跨域的时候不需要写http://作为开头,因为跨域的公共地址已经写了,所以需要使用 “/” 作为开头会避免被浏览器误判。