1、打开hbuilderx，【文件】==》【新建】==》【项目】，创建vue项目。
2、创建后的vue项目结构如下所示，打开【package.json】配置文件，添加axios相关依赖。
3、删除【node_modules】文件夹及【package-lock.json】文件。
4、右键项目，【外部命令】==》【npm install】下载相关依赖模块。
5、在【package.json】同级目录下创建【vue.config.js】文件。
6、对【vue.config.js】进行配置，配置代理。
配置代理参数项解释：
The following options are provided by the underlying http-proxy library.
option.target: url string to be parsed with the url module
option.forward: url string to be parsed with the url module
option.agent: object to be passed to http(s).request (see Node's https agent and http agent objects)
option.ssl: object to be passed to https.createServer()
option.ws: true/false: if you want to proxy websockets
option.xfwd: true/false, adds x-forward headers
option.secure: true/false, if you want to verify the SSL Certs
option.toProxy: true/false, passes the absolute URL as the path (useful for proxying to proxies)
option.prependPath: true/false, Default: true - specify whether you want to prepend the target's path to the proxy path
option.ignorePath: true/false, Default: false - specify whether you want to ignore the proxy path of the incoming request (note: you will have to append / manually if required).
option.localAddress : Local interface string to bind for outgoing connections
option.changeOrigin: true/false, Default: false - changes the origin of the host header to the target URL
option.preserveHeaderKeyCase: true/false, Default: false - specify whether you want to keep letter case of response header key
option.auth : Basic authentication i.e. 'user:password' to compute an Authorization header.
option.hostRewrite: rewrites the location hostname on (301/302/307/308) redirects.
option.autoRewrite: rewrites the location host/port on (301/302/307/308) redirects based on requested host/port. Default: false.
option.protocolRewrite: rewrites the location protocol on (301/302/307/308) redirects to 'http' or 'https'. Default: null.
option.cookieDomainRewrite: rewrites domain of set-cookie headers. Possible values:
false (default): disable cookie rewriting
String: new domain, for example cookieDomainRewrite: "new.domain". To remove the domain, use cookieDomainRewrite: "".
Object: mapping of domains to new domains, use "*" to match all domains.
For example keep one domain unchanged, rewrite one domain and remove other domains:
cookieDomainRewrite: {
"unchanged.domain": "unchanged.domain",
"old.domain": "new.domain",
"*": ""
}
option.cookiePathRewrite: rewrites path of set-cookie headers. Possible values:
false (default): disable cookie rewriting
String: new path, for example cookiePathRewrite: "/newPath/". To remove the path, use cookiePathRewrite: "". To set path to root use cookiePathRewrite: "/".
Object: mapping of paths to new paths, use "*" to match all paths. For example, to keep one path unchanged, rewrite one path and remove other paths:
cookiePathRewrite: {
"/unchanged.path/": "/unchanged.path/",
"/old.path/": "/new.path/",
"*": ""
}
option.headers: object, adds request headers. (Example: {host:'www.example.org'})
option.proxyTimeout: timeout (in millis) when proxy receives no response from target
option.timeout: timeout (in millis) for incoming requests
option.followRedirects: true/false, Default: false - specify whether you want to follow redirects
option.selfHandleResponse true/false, if set to true, none of the webOutgoing passes are called and it's your responsibility to appropriately return the response by listening and acting on the proxyRes event
option.buffer: stream of data to send as the request body. Maybe you have some middleware that consumes the request stream before proxying it on e.g. If you read the body of a request into a field called 'req.rawbody' you could restream this field in the buffer option:
7、配置【main.js】文件
8、配置【App.vue】，配置如下
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/> -->
<input :type="type" :value="value" @click="axiosHandler()" />
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
/* export default {
name: 'app',
components: {
HelloWorld
}
} */
export default{
data(){
return{
type:"button",
value:"axios test"
}
},
methods:{
axiosHandler(){
this.$axios.get("/api/s?ie=UTF-8&wd=test")
.then(res=>{
console.log("axios 跨域请求开始！");
console.log(res);
console.log("axios 跨域请求结束！");
})
.catch(error=>{
console.log(error);
});
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
9、右键项目【外部命令】==》【npm run serve】，运行项目。然后点击【axios test】按钮，查看效果。
标签：domain,axios,false,跨域,vue,path,true,option From： https://www.cnblogs.com/lightbc/p/16878984.html