处理跨域

最新推荐文章于 2022-09-30 14:53:28 发布

澜漾

最新推荐文章于 2022-09-30 14:53:28 发布

阅读量105

点赞数

本文链接：https://blog.csdn.net/weixin_44601948/article/details/106348113

版权

处理跨域的三种方式

jsonp处理跨域

remote.js

getData({"result":"我是远程js带来的数据"});

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://qdds.cn/remote.js"></script>
</head>
<body>
 
</body>
<script type="text/javascript">
    var getData = function(data){
        console.log('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result);
    };
</script>
</html>

总结

const script = document.createElement('script')
script.type = 'text/javascript'
script.src = 'http://qdds.cn/remote.js'
const getData = res => {
    console.log('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result);
}

cors处理跨域

						//	node示例
//设置跨域访问  
app.all('*', function(req, res, next) {  
    res.header("Access-Control-Allow-Origin", "*");  
    res.header("Access-Control-Allow-Headers", "X-Requested-With");  
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    next();  
});

nginx处理跨域

server {
    ...
    
    add_header Access-Control-Allow-Credentials true;
    add_header Access-Control-Allow-Origin $http_origin;
    
        
    location /file {
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin $http_origin;
            add_header Access-Control-Allow-Methods $http_access_control_request_method;
            add_header Access-Control-Allow-Credentials true;
            add_header Access-Control-Allow-Headers $http_access_control_request_headers;
            add_header Access-Control-Max-Age 1728000;
            return 204;
        }         
    }
	
    ...
}

Vue反向代理处理跨域

Vue3.0 示例没有Vue.config.js 配置文件自己建个

module.exports = {
	lintOnSave: true,
	css: {
		loaderOptions: {
			postcss: {
				plugins: [
					require('postcss-pxtorem')({
						rootValue: 37.5, // 换算的基数
						propList: ['*'],
					}),
				]
			}
		}
	},
	devServer: {
		disableHostCheck: true, // 添加这一行
		proxy: {
			'/api': {
				target: 'http://xxxxxxxxxxxxxxxx', //对应自己的接口
				changeOrigin: true,
				ws: true,
				pathRewrite: {
					'^/api': ''
				}
			}
		}
	}
}

澜漾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
处理跨域

处理跨域的三种方式jsonp处理跨域总结cors处理跨域nginx处理跨域Vue反向代理处理跨域jsonp处理跨域remote.jsgetData({"result":"我是远程js带来的数据"});index.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xml
复制链接

扫一扫