Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to configure pathRewrite in the cross-domain of vue proxyTable, the content is detailed and easy to understand, the operation is simple and quick, and has a certain reference value. I believe you will gain something after reading this article on how to configure pathRewrite in the cross-domain of vue proxyTable. Let's take a look.

Cross-domain problem of vue browser and cross-domain problem of pathRewrite configuration vue browser in vue proxyTable cross-domain

When the browser reports the following error, the request is cross-domain.

Localhost/:1 Failed to load http://www.thenewstep.cn/test/testToken.php: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Why cross-domain

Because of the restrictions of the browser's same origin policy, scripts that are not of the same origin cannot manipulate objects under other sources.

What is homologous strategy?

The same origin policy (Same origin policy) is a convention, which is the core and basic security function of the browser. If the same origin policy is missing, the normal function of the browser may be affected.

It can be said that Web is built on the basis of the same origin policy, and the browser is only an implementation of the same origin policy.

To put it simply: if the protocol, IP and port are all the same, they are of the same origin

Solution.

There are many cross-domain solutions, such as script tags, jsonp, backend cros, and so on. But what I'm talking about here is webpack configuring vue's proxyTable solution for cross-domain.

PathRewrite

To put it simply, when using proxy as a proxy, pathRewrite redirects the request path to match the correct request address

Dev: {/ / Paths assetsSubDirectory: 'static', assetsPublicPath:' /', proxyTable: {/ api': {target: 'http://XX.XX.XX.XX:8083', changeOrigin: true PathRewrite: {'^ / api':'/ api' / / this kind of interface is configured http://XX.XX.XX.XX:8083/api/login / /'^ / api':'/ 'this kind of interface is configured http://XX.XX.XX.XX:8083/login}

How to forward the pathRewrite request to the http://XX.XX.XX.XX:8083 without configuring it and bring the corresponding uri with it.

For example, localhost:8080/api/xxx will be forwarded to http://XX.XX.XX.XX:8083/api/xxx

It needs to be recompiled after the configuration is completed, and when the interface is called

/ / get menu permissions getPermission () {this.$ajaxget ({url:'/ api/getPermission', data: {}, isLayer: true, successFc: data = > {console.log (data.data)}})

Two data request methods: fecth and axios

1. Fetch mode

On the page that needs the request, you only need to write this (/ apis+ specific request parameters), as follows:

Fetch ("/ apis/test/testToken.php", {method: "POST", headers: {"Content-type": "application/json", token: "f4c902c9ae5a2a9d8f84868ad064e706"}, body: JSON.stringify (data)}) .then (res = > res.json ()) .then (data = > {console.log (data);})

2. Axios mode

Main.js code

Import Vue from 'vue'import App from'. / App'import axios from 'axios'Vue.config.productionTip = falseVue.prototype.$axios = axios / / Mount axios on the Vue instance prototype / / set the tokenaxios.defaults.headers.common of the axios request [' token'] = 'f4c902c9ae5a2a9d8f84868ad064e706'// setting request header axios.defaults.headers.post ["Content-type"] = "application/json"

Axios request page code

This.$axios.post ('/ apis/test/testToken.php',data) .then (res= > {console.log (res)}) Agent configuration pathrewrite failure crater under proxy

The code found directly from the Internet was copied to report an error, and finally found out why it failed all afternoon, and finally found that the problem broke through the defense directly.

Error:

PathRewrite: {"^ / api": "" / / if the requested path is under the target url but not / api, convert it to empty}

Correct:

PathRewrite: {"^ / api": "" / / if the requested path is under the target url but not / api, convert it to empty}

Reason:

If two spaces are added to the copied "^ / api": ", you will not get / api when judging url, and deleting the space will solve the problem.

This is the end of the article on "how to configure pathRewrite in the cross-domain of vue proxyTable". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to configure pathRewrite in the cross-domain of vue proxyTable". If you want to learn more knowledge, you are welcome to follow the industry information channel.

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.