跨域是什么 简单的讲就是你在一个地方使用另一个地方的资源，被浏览器给挡下来了，不让不用！当然，它挡下来是有自己理由的：为了安全(╬▔皿▔)╯。
解决跨域 【vue|vue中代理解决跨域】我是用vue开发的，就vue代理模式解决跨域说明一下。
1、在vue.config.js中这样写：
let devProxy = {
//获取ip信息
'/getIpMsg': {
target: "https://whois.pconline.com.cn/ipJson.jsp",//真实地址
ws: true,
changeOrigin: true,
pathRewrite: {
'/getIpMsg': ''
},
},
};
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
devServer: {
port: 8080,//端口
open: false,//项目启动后是否在浏览器自动打开
proxy: devProxy//代理服务器
},
})target就是自己需要代理的真实地址getIpMsg你是可以自定义的。
2、创建一个http.ts（我是ts的，你也可以js）:
import axios from "axios";
//创建请求
function createServe(config: any) {
let serve = axios.create({
timeout: 5000 //超时
});
//请求拦截器
serve.interceptors.request.use(
config => {
return config;
},
error => {
return Promise.reject(error)
}
)
//响应拦截器
serve.interceptors.response.use(
response => {
return response;
},
error => {
return Promise.reject(error)
}
)
return serve(config);
}export default createServe;
3、创建一个request.ts:
import createServe from "./http"//获取ip信息
export function getIpMsg(params = {}) {
return createServe({
method: "GET",
url: '/getIpMsg',
params
})
}
4、这样使用：
import { getIpMsg } from "@/api/request";
function test(){
getIpMsg()
.then(res => {
console.log(res);
})
}推荐阅读
- vue|vuex的使用
- JavaScript中通过style修改属性时需要添加“px”
- vue.js|vue开发搜索框防抖的优化和日常报错,
- vue项目|vue移动端 利用防抖的原理 ---实现搜索页面防抖操作
- vue.js|vue中搜索实现防抖
- vue.js|vue3 el-input 搜索实现防抖
- Vue.js|Vue移动端项目——搜索联想建议功能的实现（结合watch属性和使用lodash防抖节流）
- vue|Vue + ElementUI+ el-autocomplete 组件的防抖方案的懒加载
- 微信小程序|【uni-app】搜索框的防抖处理