vue-cli3跨域处理,解决500错误以及Proxyerror
vue-cli3跨域处理，解决500错误以及Proxyerror
⽬录
1 上代码（使⽤的是vue-cli3脚⼿架）
1）⽬录
2） fig.js 这⾥只要看devServer这⼀项就ok
// fig.js
const path = require("path");
const webpack = require("webpack");
// 项⽬部署的基本路径
// 默认假设你的应⽤将会部署在域名的根部
// ⽐如，www.vue-cli/
//如果你的应⽤是部署在⼀个⼦路径下，那么你需要在这⾥指定⼦路径，⽐如，如果你部署在 -vue/my-app/; 那么将这个值改为 “/my-app/”
publicPath: "/",
/
/将构建好的⽂件输出到哪⾥当运⾏ vue-cli-service build 时⽣成的⽣产环境构建⽂件的⽬录。注意⽬标⽬录在构建之前会被清除 (构建时传⼊ --no-clean 可关闭该⾏    outputDir: "dist",
//放置⽣成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) ⽬录。
assetsDir: "",
// 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后⽣效。
// 设置为 true 时，eslint-loader 会将 lint 错误输出为编译警告。默认情况下，警告仅仅会被输出到命令⾏，且不会使得编译失败。
// 如果你希望让 lint 错误在开发时直接显⽰在浏览器中，你可以使⽤ lintOnSave: 'error'。这会强制 eslint-loader 将 lint 错误输出为编译错误，同时也意味着 lint 错误    lintOnSave: true,
//是否使⽤包含运⾏时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使⽤ template 选项了，但是这会让你的应⽤额外增加 10kb 左右。
runtimeCompiler: false,
龙猫多少钱
// 默认情况下 babel-loader 会忽略所有 node_modules 中的⽂件。如果你想要通过 Babel 显式转译⼀个依赖，可以在这个选项中列出来。
transpileDependencies: [],关于风的古诗
//如果你不需要⽣产环境的 source map，可以将其设置为 false 以加速⽣产环境构建。
productionSourceMap: true,
//是⼀个函数，会接收⼀个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进⾏更细粒度的修改。    chainWebpack: () => {},
星星之火可以燎原的意思//是否为 Babel 或 TypeScript 使⽤ thread-loader。该选项在系统的 CPU 有多于⼀个内核时⾃动启⽤，仅作⽤于⽣产构建。
端口被占用parallel: require("os").cpus().length > 1,
// 向 PWA 插件传递选项。
// github/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// 所有 webpack-dev-server 的选项都⽀持。注意：有些值像 host、port 和 https 可能会被命令⾏参数覆写。
//有些值像 publicPath 和 historyApiFallback 不应该被修改，因为它们需要和开发服务器的 publicPath 同步以保障正常的⼯作。    // 代理配
devServer: {
一个人的夜我的心应该放在哪里是什么歌host: "0.0.0.0",
port: 8082, // 端⼝号
https: false, // https:{type:Boolean}
open: true, //配置⾃动启动浏览器  open: 'Google Chrome'-默认启动⾕歌
// proxy: 'localhost:9000' // 配置跨域处理，只有⼀个代理
// 配置多个代理
proxy: {
"/api": {//配置代理以“/api”
target: "localhost:4000", //⽬标主机
ws: true, //代理的WebSockets
changeOrigin: true, //需要虚拟主机站点
pathRewrite: {
"^/api": ""
}
}
}
},
/
/ 第三⽅插件选项
// 这是⼀个不进⾏任何 schema 验证的对象，因此它可以⽤来传递任何第三⽅插件选项。
pluginOptions: {}
};
3）api/ajax.js代码
名画介绍
import axios from 'axios'
export default function ajax (url, data={}, type='GET') {
return new Promise(function (resolve, reject) {
// 执⾏异步ajax请求
let promise;
if (type === 'GET') {
/
/ 准备url query参数数据
let dataStr = ''; //数据拼接字符串
Object.keys(data).forEach(key => {
dataStr += key + '=' + data[key] + '&'
});
if (dataStr !== '') {
dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'));
url = url + '?' + dataStr;
}
// 发送get请求
promise = (url)
} else {
// 发送post请求
promise = axios.post(url, data)
}
promise.then(function (response) {
// 成功了调⽤resolve()
resolve(response.data)
}).catch(function (error) {
//失败了调⽤reject()
reject(error)
})
})
}
4）api/index.js代码
import ajax from './ajax'
//const BASE_URL = 'localhost:4000'
let BASE_URL = "/api";
export const reqShops = (longitude, latitude) => ajax(BASE_URL+'/shops', {longitude, latitude}) 5）App.vue
<template>
<div id = "app">
<router-view></router-view>
<FooterGuide v-show = this.$a.showFooterGuide></FooterGuide>
</div>
</template>
<script>
import FooterGuide from "./components/FooterGuide/FooterGuide"
import {reqShops} from "./api"
export default {
components: {
FooterGuide
},
mounted() {
const result = reqShops(40.10038,116.36867)
console.log(result);
}
}
</script>
<style>
#app {
width: 100%;
height: 100%;
background: #f5f5f5;
}
</style>
6）main.js代码
import Vue from "vue";
import App from "./App.vue"
import router from "./router"
import Router from 'vue-router'
const originalPush = Router.prototype.push;
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
};
new Vue({
el: "#app",//需要定义⼀个html⽂档，然后⽂档⾥⾯仅有⼀个div，id为app
render: h => h(App),
router
});
7）index.html代码中有⼀个div的id为“#app”
2问题
后端使⽤npm run start启动，前端使⽤npm run serve启动，使⽤postman能请求数据。但是⾕歌浏览器控制台出现“500”错误network出现错误：
3 解决办法（度娘）⼀个bug了半天⽅法？
1）看这篇博客以及其他类似博客有感
有说“服务器使⽤了端⼝4000”，客户端使⽤端⼝“8082”，这两者属于跨域，需要在配置⽂件fig.js实现跨域，使
⽤proxy技术
仔细看了很久，逐个字母字符看，⼀遍⼜⼀遍，我好像没有打错字呀。“target”属性使⽤了“http:”开头了。到底什么问
题应该不是跨域吧
2）看到有些评论说使⽤Nginx反向代理。脑壳疼啦，我不会⽤，继续度娘，今天不到，我就放弃啦
说“开机正常，退出重新登录，就出现500错误proxy error”，这时候还不懂怎么看端⼝是否被占⽤，想着按着⽼哥的重启电脑，端⼝就不会被占⽤啦，于是重启电脑，重启项⽬，postman能调试出来，vue项⽬不⾏，⼤写的难受
3）受2）还有篇⽂章影响，
于是我开始传说中的端⼝占⽤问题。把⾃⼰的前后台都关了，然后使⽤cmd查看端⼝是否占⽤.步骤如下：
执⾏ netstat -aon|findstr “4000”，到PID，发现PID为“3332”和“5248”被占⽤（得了，有戏）；
执⾏tasklist|findstr “PID”  寻相应的进程；
执⾏命令taskkill /f /t /im 程序名.exe    结束进程

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。