vue中解决跨域问题_js跨域解决方案

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

如果你是一个Web前端工程师，那么跨域这个问题肯定是绕不开的！???

1. 创建 vue.config.js

设置 devServer 属性

module.exports = { 
         
  devServer: { 
                   //webpack-dev-server配置
      host : 'localhost',       
      port : 8080,            //配置本项目运行端口
      proxy: { 
                   //配置代理服务器来解决跨域问题
          '/api': { 
   
              target: 'http://localhost:3000',      //配置要替换的后台接口地址
              changOrigin: true,                      //配置允许改变Origin
              pathRewrite: { 
   
                  '^/api': ''
              }
          },
      }
  },
}

2. axios 设置

import axios from 'axios'

export default function ({ 
    data}) { 
   
  const baseUrl = '/api'
  const server = axios.create({ 
   
    baseURL: baseUrl,
    timeout: 5000
  })

  return server(data)
}

3. 封装请求api

import request from '@/utils/http/request.js'
export function userListApi () { 
   
  return request ({ 
   
    data: { 
   
      url: '/userList',
      method: 'GET'
    }
  })
}

4. 发送请求

<script> import { 
      userListApi } from '@/api/user' export default { 
      name: 'Index', mounted () { 
      this.getUserList() }, methods: { 
      async getUserList () { 
      let result = await userListApi() console.log(result.data) } } } </script>

总结

解决跨域的办法其实还有很多，像 jsonp、cors、nginx 等…

其实在开发中一般情况下是后台来解决跨域的（我个人想法，不代表所有），但是如果非要前端来解决我们也有办法。记得刚开始接触跨域这个问题的时候，百思不得姐。最終還是有點理解了，最近在學習Vue再次碰到跨域的問題，就拿Vue再來解決一下跨域問題，記錄留念。