前端动静资源分离跨域处理

最新推荐文章于 2024-07-08 10:53:15 发布

会喝水的旱鸭子

最新推荐文章于 2024-07-08 10:53:15 发布

阅读量431

点赞数 8

分类专栏：笔记文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/qq_38272894/article/details/134944745

版权

笔记专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了前端处理跨域问题的方法，包括后端设置`Access-Control-Allow-Origin`等响应头，以及使用axios、jQuery的ajax、ElementUI的el-upload组件和Nginx代理配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端跨越需要处理的几点地方，以及后端配置

最近没事干，随便写点跨域的东西记录一下吧，毕竟好记性不如烂笔头
浏览器的同源策略在这里就不多说了，直接写一下一般处理方式吧

后端配置

后端全局响应头配置：

'Access-Control-Allow-Origin':'*',//一般不设置任意域名*，允许跨域请求的域名，设置前端部署域名
'Access-Control-Allow-Credentials': 'true',//允许携带cookie之类的身份验证信息
'Access-Control-Allow-Methods': 'POST,GET,PUT,OPRIONS,DELETE,PATCH',//允许请求方式
'Access-Control-Max-Age': '3600',//预检请求有效期，单位为秒，在有效期内，浏览器只发送一次预检请求
'Access-Control-Allow-Headers': 'accept,x-requested-with,cookie,Authorization,x-ui-request'//允许的请求头，如果前端有自定义签名字段放在请求头里，记得加在里面

前端使用axios请求

import axios from 'axios'
axios.default.widthCredentials = true //允许携带cookie等身份凭证信息

前端使用ajax请求

$.ajax({
	url: 'https://xxx',
	type: 'POST',
	xhrFields: { widthCredentials: true },//允许携带cookie等身份凭证信息
	success(res){
		console.log(res)
	}
})

如前端使用element组件el-upload

<el-upload
	:action="'https://xxx'"
	:with-credentials="true"
	:accept="'image/*'"
	:limit="9">
</el-upload>

前端使用代理

module.exports = {
	dev: {
		assetsSubDirectory: 'static',
		assetsPublicPath: '/',
		proxyTable: {
			'/api': {
				target: 'https://',//代理地址
				changeOrigin: true, //可否跨域
				pathRewrite: {'^/api': ''}
			}
		}
	}
}