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再來解決一下跨域問題，記錄留念。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/192441.html原文链接：https://javaforall.net
