报错 Reterrer Policy:strict-orlgin-when-cross-origin
什么是跨域？
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
| 当前页面url | 被请求页面url | 是否跨域 | 原因 |
|---|---|---|---|
| http://www.test.com/ | http://www.test.com/index.html | 否 | 同源（协议、域名、端口号相同） |
| http://www.test.com/ | https://www.test.com/index.html | 跨域 | 协议不同 |
| http://www.test.com/ | http://www.baidu.com/ | 跨域 | 主域名不同（test/baidu） |
| http://www.test.com/ | http://blog.test.com/ | 跨域 | 子域名不同（www/blog） |
| http://www.test.com:8080/ | http://www.test.com:7001/ | 跨域 | 端口号不同（8080/7001） |
解决办法
- 安装shelf_proxy依赖库
dependencies:
shelf_proxy: ^1.0.1
- lib下新建proxy.dart
import 'package:shelf/shelf_io.dart' as shelf_io;
import 'package:shelf_proxy/shelf_proxy.dart';
Future<void> main() async {
final server = await shelf_io.serve(
proxyHandler('https://dart.cn'),
'localhost',
8080,
);
print('Proxying at http://${server.address.host}:${server.port}');
}
- 运行服务
dart ./lib/proxy.dart
- 将项目中的接口地址改成localhost:8080
测试通过
开发过程http访问有跨域问题，需要本地搭建代理服务器。
我的代理服务器使用dart开发：
const String LocalHost = 'localhost';
Future main() async {
Cors.url.forEach((url, port){
var server = shelf_io.serve(
proxyHandler(url),//url是代理的链接
LocalHost,
port,//port是开启的代理端口
);
server.then((value){
// 添加上跨域的这几个header
value.defaultResponseHeaders.add('Access-Control-Allow-Origin', '*');
value.defaultResponseHeaders.add('Access-Control-Allow-Credentials', true);
print('Serving at ${url} => port: ${port}');
});
});
}
