Question 🤔️ : Have you ever encountered an error message like this in a front-end project?
Network Referrer Policy: no-referreer-when – remichaelstate
Or appear in the console Access to the XMLHttpRequest at ‘http://localhost:8080/… ‘ from origin ‘http://…….. ‘ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Then it should be resolved across domains!!
1. What is cross-domain?
Any difference in domain name, protocol, IP address, or port number is cross-domain
2. Resolve cross-domain?
- Scenario 1: JSONp – use script SRC to send only GET requests.
- Solution 2: CORS Background Settings allow cross-domains Background Settings Allow cross-domains All background languages can be configured.
Access-Control-Allow-Origin:*
Access-Control-Allow-Methods:"POST,GET,OPIONS,DELECT"
Copy the code- Scheme 3: Server proxy
Proxy Vue can be configured to override webpack in vue.config.js
module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/', '/', configureWebpack: (config) = > {/ / config entry documents. Entry. App = [' Babel - polyfill ', '. / SRC/main. Ts']. }, devServer: {/ / local cross-domain agent, modify need to re-run the yarn serve | | NPM run serve proxy: {'/API: {target: 'http:xxx.xx.xxx.xx:8080/', changeOrigin: true, ws: true, pathRewrite: { '^/api': '' } }, '/apu': { target: 'http:xxx.xx.xxx.xx:8080/', changeOrigin: true, ws: true, pathRewrite: { '^/apu': '' } } } } }Copy the code