Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to solve cross-domain problems in vue-cli3". In daily operation, I believe many people have doubts about how to solve cross-domain problems in vue-cli3. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to solve cross-domain problems in vue-cli3". Next, please follow the editor to study!

1: forward any unknown requests to the proxy server

Such as:

Front-end address: 127.0.0.1

Backend address: 127.0.0.2

When the access address is 127.0.0.1/api and it does not match, it will be forwarded to the proxy server 127.0.0.2/api

Module.exports= {devServer: {proxy: "http://www.acfun.cn"}}

2: multi-agent control

More proxy service configuration items search http-proxy-middleware view

Module.exports = {devServer: {proxy: {'/ search': {/ / search is the forwarding path target: 'http://www.acfun.cn', / / destination address ws: true, / / whether to proxy websockets changeOrigin: true / / set the same origin default false, whether the original host header needs to be changed to the destination URL,}

Such as:

When the current access address is xxx.xxx.xxx/search, it will be forwarded to the proxy server http://www.acfun.cn/search

Xxx.xxx.xxx/search-> http://www.acfun.cn/search

3: instance

Api.js file (mainly for global configuration)

Import Axios from "axios"; let http = Axios.create ({timeout: 3000, / / timeout configuration 3 seconds responseType: 'json', / / response data format responseEncoding:' utf8', / / response data Encoding}); export default http

Entry file main.js

Import Vue from "vue"; import App from ". / App.vue"; import router from ". / router"; import http from ". / api"; / / reference the axios global configuration Vue.config.productionTip = false;Vue.prototype.$http = http; / / add the prototype method, so that the created object comes with this method. New Vue ({router, render: h = > h (App)}). $mount ("# app")

Vue.config.js profile

More proxy service configuration items search http-proxy-middleware view

Module.exports = {devServer: {proxy: {'/ search': {target: 'http://www.acfun.cn', ws: true,// whether to proxy websockets changeOrigin: true / / set the same origin default false, whether the original host header needs to be changed to the target URL} At this point, the study on "how to solve cross-domain problems in vue-cli3" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.