前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy

在一些前后端不同源的项目中,前端向后端发起请求时,有时候无法正常向后端请求到服务,F12查看控制台会发现报错Access to XMLHttpRequest at 'xxx' from origin 'xxx' 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.而无法正常提供服务。

这是由于所有使用JavaScript的浏览器都会支持同源策略。同源策略即指域名/协议/端口号相同。只要有一个不同,就会当作跨域请求。 此时还有浏览器同源策略的保护,是防止不同源(域、协议或端口)的网页之间进行恶意操作。所以综上,前端后端处在不同的域时就会报该错误。

解决方法为:

1.一种是让后端接口里添加如下两句代码:

java 复制代码
header('Access-Control-Allow-Origin:*');//允许所有来源访问

header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

2.在前端框架index.js添加代理:

如果使用vue-cli脚手架创建的项目,找到config文件夹下的index.js文件。

找到dev下的proxyTable {}

举个例子,如果请求接口为http://www.baidu.com/user/info/list,请求头为http://www.baidu.com/,那么就添加

html 复制代码
"/api": {
	target: "http://www.baidu.com/",
	changeOrigin: true,
}

然后找到请求页面,在axios的请求接口里面只写/user/info/list就行了。

3.vue3在项目根目录下新建vue.config.js文件,在该文件内新增如下配置:

html 复制代码
module.exports = {
    devServer: {
        open: true,
        host: 'localhost',
        port: 8080,
        proxy: {
			//这个意思是每一个接口只要匹配到这种开头的接口,就走当前代理配置
            '/api': {    //1
				// 意思是目标地址,你请求谁报跨域了,你就把谁放这
                target: 'http://www.baidu.com/user/info/list',    //2
                changOrigin: true,
				//pathRewrite意思是重写地址,这个就是把代理后请求的地址中匹配替换成==> ""空,
				//当实际需要请求的路径里面没有"/api"时. 就需要 pathRewrite,用''^/api'':'', 把'/api'去掉, 这样既能有正确标识, 又能在请求到正确的路径
                pathRewrite: {    //3
                    '^/api': ''
                }
            }
        }
    }
}

然后找到请求页面,在axios的请求接口里面只写/api就行了。

相关推荐
可观测性用观测云几秒前
前端错误可观测最佳实践
前端
恋猫de小郭1 分钟前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter
一枚前端小能手22 分钟前
「周更第3期」实用JS库推荐:Lodash
前端·javascript
艾小码22 分钟前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
Cyan_RA929 分钟前
计算机网络面试题 — TCP连接如何确保可靠性?
前端·后端·面试
谢尔登29 分钟前
【CSS】层叠上下文和z-index
前端·css
鹏多多30 分钟前
前端复制功能的高效解决方案:copy-to-clipboard详解
前端·javascript
AryaNimbus32 分钟前
你不知道的 Cursor系列(三):再也不用死记硬背 Linux 命令,终端 Cmd+K 来帮你!
前端·ai编程·cursor
uhakadotcom34 分钟前
Rollup 从0到1:TypeScript打包完全指南
前端·javascript·面试
Mintopia39 分钟前
实时语音转写 + AIGC:Web 端智能交互的技术链路
前端·javascript·aigc