跨域是什麼

簡單的講就是你在一個地方使用另一個地方的資源，被瀏覽器給擋下來了，不讓不用！當然，它擋下來是有自己理由的：為了安全(╬▔皿▔)╯。

解決跨域

我是用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);
	})
}

原創者：曦12

原文鏈接：https://www.cnblogs.com/xi12/p/16690090.html

轉載請註明原創者添加原文鏈接！