VUE系列三：实现跨域请求(fetch/axios/proxytable)

发布时间：2020-12-16 23:19:59 所属栏目：百科来源：网络整理

导读：1. 在 config/index.js 配置文件中配置proxyTable 'use strict' = require('path' module.exports =span style="color: #000000" { dev: { /spanspan style="color: #008000"gt;///spanspan style="color: #008000"gt; Paths/spanassetsSubDirectory: 'stati

1. 在 config/index.js 配置文件中配置proxyTable

'use strict' = require('path'module.exports = {
dev: {

</span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; Paths</span>
assetsSubDirectory: 'static'<span style="color: #000000"&gt;,assetsPublicPath: </span>'/'<span style="color: #000000"&gt;,<span style="color: #ff0000"&gt;  proxyTable: {
  </span></span><span style="color: #ff0000"&gt;'/apis': {
    // 测试环境
    target: 'http://www.thenewstep.cn/',// 接口域名
    changeOrigin: true,//是否跨域
    pathRewrite: {
        '^/apis': ''   //需要rewrite重写的,}              
}
},</span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; Various Dev Server settings</span>
host: 'localhost',<span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; can be overwritten by process.env.HOST</span>
port: 8080,<span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; can be overwritten by process.env.PORT,if port is in use,a free one will be determined</span>
autoOpenBrowser: <span style="color: #0000ff"&gt;false</span><span style="color: #000000"&gt;,errorOverlay: </span><span style="color: #0000ff"&gt;true</span><span style="color: #000000"&gt;,notifyOnErrors: </span><span style="color: #0000ff"&gt;true</span><span style="color: #000000"&gt;,poll: </span><span style="color: #0000ff"&gt;false</span>,<span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-</span>


<span style="color: #008000"&gt;/*</span><span style="color: #008000"&gt;*
 * Source Maps
 </span><span style="color: #008000"&gt;*/</span>

<span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; https://webpack.js.org/configuration/devtool/#development</span>
devtool: 'cheap-module-eval-source-map'<span style="color: #000000"&gt;,</span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; If you have problems debugging vue-files in devtools,</span>
<span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; set this to false - it *may* help</span>
<span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; https://vue-loader.vuejs.org/en/options.html#cachebusting</span>
cacheBusting: <span style="color: #0000ff"&gt;true</span><span style="color: #000000"&gt;,cssSourceMap: </span><span style="color: #0000ff"&gt;true</span><span style="color: #000000"&gt;

},build: {
// Template for index.html
index: path.resolve(dirname,'../dist/index.html'),// Paths
assetsRoot: path.resolve(dirname,'../dist'),assetsSubDirectory: 'static',/

Source Maps
*/

productionSourceMap: </span><span style="color: #0000ff"&gt;true</span><span style="color: #000000"&gt;,</span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; https://webpack.js.org/configuration/devtool/#production</span>
devtool: '#source-map'<span style="color: #000000"&gt;,</span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; Gzip off by default as many popular static hosts such as</span>
<span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; Surge or Netlify already gzip all static assets for you.</span>
<span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; Before setting to `true`,make sure to:</span>
<span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; npm install --save-dev compression-webpack-plugin</span>
productionGzip: <span style="color: #0000ff"&gt;false</span><span style="color: #000000"&gt;,productionGzipExtensions: [</span>'js','css'<span style="color: #000000"&gt;],</span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; Run the build command with an extra argument to</span>
<span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; View the bundle analyzer report after build finishes:</span>
<span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; `npm run build --report`</span>
<span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; Set to `true` or `false` to always turn it on or off</span>

bundleAnalyzerReport: process.env.npm_config_report
}
}

?2.?fetch实现跨域请求

?在根组件App.vue里面发送请求

//2. 行为：处理逻辑

//3. 样式：解决样式

?响应结果：

3.?axios实现跨域请求

?3.1 停止项目，安装axiosnpm install axios，然后重启项目npm run dev

3.2 在main.js里面引入axios，配置全局使用axios，设置token和请求头

import Vue from 'vue' import VueRouter from 'vue-router' import VueResource from 'vue-resource' import App from './App' import Users from './components/Users' import Home from './components/Home'

//全局使用axios
Vue.prototype.$axios = axios
//设置token
axios.defaults.headers.common['token'] = "f4c902c9ae5a2a9d8f84868ad064e706"
//设置请求头
axios.defaults.headers.post["Content-type"] = "application/json"

Vue.config.productionTip = false
//引入路由后使用路由,这样就可以在任何组件中使用路由了
Vue.use(VueRouter)
//引入vue-resource后使用vue-resource,这样就可以在任何组件中使用http了
Vue.use(VueResource)
//配置路由
const router = new VueRouter(
{
routes : [
//配置路由跳转到Home这个组件
{path:"/",component:Home},//配置路由跳转到Users.vue这个组件
{path:"/Users",component:Users}
],//去掉地址栏的"/#/"
mode : "history"
}
)

/ eslint-disable no-new /
new Vue({ //实例化一个vue对象
router,//使用路由
el: '#app',//index.html的根元素app
components: { App },//注册根组件App.vue才能使用
template: ''//VUE模板使用，可以是组件、html标签等
})

?3.2??在根组件App.vue里面发送请求

//2. 行为：处理逻辑

//3. 样式：解决样式

?响应结果：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!