Vue中如何详细实现代理模式以解决跨域问题？

本文共计456个文字，预计阅读时间需要2分钟。

目录+跨域是什么+解决跨域+1、在vue.config.js中这样写：

2、创建一个http.ts（我是ts，你也可以用js）：

3、创建一个request.ts：

4、这样使用：

跨域是什么+简单的讲解就是你在一方地方使用另一方的资源

javascript// vue.config.jsmodule.exports={ devServer: { proxy: { '/api': { target: 'http://example.com', changeOrigin: true, pathRewrite: { '^/api': '' }, }, }, },};

typescript// http.tsimport axios from 'axios';

const http=axios.create({ baseURL: 'http://example.com',});

export default http;

typescript// request.tsimport http from './http';

export const request={ get(url: string, params?: any) { return http.get(url, { params }); }, post(url: string, data?: any) { return http.post(url, data); },};

typescript// 使用示例import { request } from './request';

request.get('/api/data').then(response=> { console.log(response.data);});

目录

• 跨域是什么
• 解决跨域
• 1、在vue.config.js中这样写：
• 2、创建一个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代理模式解决跨域详解的文章就介绍到这了,更多相关vue代理模式解决跨域内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！