Cross-domain
Cross-domain error reporting is a very classic error in front-end development. The error is as follows
Access to XMLHttpRequest at '......' from origin
'......' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Cross-domain errors originate from the browser's homologous policy. If you want to solve cross-domain, you must first know what a homologous policy is.
Same Origin Policy
Same-origin policy: a famous security policy. URLs have three basic components: protocol + domain name or ip + port. The three must be exactly the same as they are called homologous, and those with different sources are called cross-domain
| URL | URL | contrast |
|---|---|---|
| http://localhost:3000/ | https://localhost:3000/ | Different sources: Different protocols |
| http://localhost:3000/ | http://127.0.0.1:3000/ | Different sources: different domain name or IP |
| http://localhost:3000/ | http://localhost:3001/ | Different sources: different ports |
| http://localhost:3000/ | http://localhost:3000/ | Homogenous |
| http://127.0.0.1:3000/ | http://127.0.0.1:3000/ | Homogenous |
Note: The same-origin policy is not the behavior of the server, but the behavior of the browser. The server will respond to the request normally, but if it is different, it will be intercepted by the browser.
Express Server
Build an express server to demonstrate cross-domain error reports
Install express
npm i express
let express = require('express')
let app = express()
(3000, () => {
('The server has started...')
})
(('./views'))
('/getTest', (req, res) => {
()
()
})views/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="/axios/dist/"></script>
<script>
function getIpTest() {
axios({
method: "get",
url: "http://127.0.0.1:3000/getTest",
params: { uid: 123 },
}).then((res) => {
();
});
}
function getDnameTest() {
axios({
method: "get",
url: "http://localhost:3000/getTest",
params: { uid: 123 },
}).then((res) => {
();
});
}
</script>
</head>
<body>
<button onclick="getIpTest()">getIpTest</button>
<button onclick="getDnameTest()">getDnameTest</button>
</body>
</html>Open the browser to visit http://127.0.0.1:3000/
Calling getIpTest to send a request will not report an error, because the server accessed by the browser address bar is http://127.0.0.1:3000/, and the URL sent in the method is also http://127.0.0.1:3000/, which is considered to be the same source.
Call getDnameTest to send the request error, because the server accessed by the browser address bar is http://127.0.0.1:3000/, and the URL sent to the method is also http://localhost:3000/, which is considered to be cross-domain
Access to XMLHttpRequest at 'http://localhost:3000/......' from origin
'http://127.0.0.1:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Open the browser to visit http://localhost:3000/
Calling getDnameTest to send a request will not report an error, because the server accessed by the browser address bar is http://localhost:3000/, and the URL sent in the method is also http://localhost:3000/, which is considered to be the same source.
Call getIpTest to send a request error, because the server accessed by the browser address bar is http://localhost:3000/, and the URL sent in the method is also http://127.0.0.1:3000/, which is considered to be cross-domain
Access to XMLHttpRequest at 'http://127.0.0.1:3000/......' from origin
'http://localhost:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
vue handles cross-domain
Create a vue project and install axios module
vue create app
npm install axios vue-axios
import axios from 'axios' import VueAxios from 'vue-axios' (VueAxios, axios)
views/
<template>
<div class="about">
<button @click="getTest()">getTest</button>
</div>
</template>
<script>
export default {
methods: {
getTest() {
({
method: "get",
url: "http://127.0.0.1:3000/getTest",
params: { uid: 123 },
}).then((res) => {
();
});
},
},
};
</script>The scaffolding project port is 8080 and the requested express server port is 3000. It does not meet the same-origin policy, and sending a request to report a cross-domain error.
Access to XMLHttpRequest at 'http://127.0.0.1:3000/......' from origin
'http://127.0.0.1:8080' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Solution: Configure the proxy server
: After modification, you need to restart the scaffolding project
const { defineConfig } = require('@vue/cli-service')
= defineConfig({
transpileDependencies: true,
devServer: {
//Configure http-proxy proxy method across domain proxy: {
// Customize the beginning of a request, use the proxy to handle requests starting with /demo, /xxx can customize "/demo": {
// Which server to send a request target: "http://127.0.0.1:3000",
pathRewrite: {
// ^ represents the beginning of a string. When actually sending a request, the /demo at the beginning of the request will be deleted. // Because /demo is not part of the request, it is just an agent's identity "^/demo": "",
},
},
// If there are other URLs that also need to be cross-domain, continue to configure // "/Other...": { // target: "Other request address", // pathRewrite: {
// "^/Other...": "", // },
// },
},
},
})views/
<template>
<div class="about">
<button @click="getTest()">getTest</button>
</div>
</template>
<script>
export default {
methods: {
getTest() {
({
method: "get",
// Remove http://127.0.0.1:3000 on the original url and replace it with /demo url: "/demo/getTest",
params: { uid: 123 },
}).then((res) => {
();
});
},
},
};
</script>principle:
Cross-domain is the browser's security policy, and there is no cross-domain sending requests between servers and servers.
A built-in node server will be started when starting the scaffolding
When requesting, the browser does not actually communicate directly with the server that needs to be requested, but instead transfers it through the built-in node server.
Notice:
The project needs to be launched to run the packaged files on the server instead of starting the scaffolding, so there is no built-in node server as a proxy, so this method is only applicable to the development and testing stage.
When online, you need to use nginx proxy or server to configure cors (each language has its own different configuration method)
Express handles cross-domain
Cors module is required to handle cross-domain in express
npm i cors
let express = require('express')
// Introduce cors module var cors = require("cors");
let app = express()
(3000, () => {
('The server has started...')
})
// Configure cross-domain (cors({
// Allows cross-domain server addresses, and can write multiple server addresses origin: ['http://localhost:3000', 'http://127.0.0.1:3000'],
// It needs to be set to true when using cookies credentials: true
}));
(('./views'))
('/getTest', (req, res) => {
()
()
})Summarize
This is the end of this article about how to solve cross-domain problems in the Vue project. For more related cross-domain problems, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!