vue代理模式解决跨域详解

目录 跨域是什么 解决跨域 1、在vue.config.js中这样写： 2、创建一个http.ts（我是ts的，你也可以js）: 3、创建一个request.ts: 4、这样使用：

跨域是什么

简单的讲就是你在一个地方使用另一个地方的资源，被浏览器给挡下来了，不让不用！当然，它挡下来是有自己理由的：为了安全(╬▔皿▔)╯。

解决跨域

我是用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代理模式解决跨域详解的文章就介绍到这了,更多相关vue代理模式解决跨域内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

查看更多关于vue代理模式解决跨域详解的详细内容...