Access to XMLHttpRequest at 'http://localhost:8080/xxx' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Due to browser same-origin policy restrictions. The Same Origin Policy is a convention. This is the main and essential security feature of the browser. Without the same-origin policy, normal browser functionality may be affected. The web is built on the same-origin policy, and browsers are just one implementation of the same-origin policy. The Same Origin Policy prevents JavaScript scripts from one domain from interacting with content from another domain. The so-called same origin (that is, the same domain) means that two pages have the same protocol, host and port.
Solution:
1. Set the response header on the server side
res.setHeader("Access-Control-Allow-Origin","*")
2. Use third-party middleware such as cors
import cors from "cors"
app.use(cors())
3. Configure the proxy
//vue.config.js
devServer:{
port:8088,
proxy:"http://localhost:6060"
}
//App,vue
methods:{
getInfo(){
axios.get("http://localhost:8088/info").then(
response=>{
console.log("success-666!!!")
console.log(response.data)
},
err=>{
console.log(err.message)
}
)
}
}
4. Configure multiple proxies
devServer:{
port:8088,
proxy:{
"/hello":{
target:"http://localhost:6060",
changeOrigin:true,
pathRewrite:{"^/hello":""}
},
// "/xxx":{},
}
}
});
Comments
Post a Comment