이 글에서는 Vue가 도메인 간 문제를 처리하는 방식에 대해 자세히 소개하고 이에 관심이 있는 친구들이 배울 수 있는 지식 포인트를 소개합니다.
특급 프록시 요청 설정
vue-cli
기반 프로젝트에서는 개발 환경 구성(config/dev.env.js)에서 모든 를 보낼 수 있도록 프록시를 설정합니다. code>/ apidomain
으로 시작하는 요청은 npm run dev
vue-cli
的项目中,在开发环境配置(config/dev.env.js)中设置代理,能够将所有/apidomain
开头的请求都通过npm run dev
启动的express
服务器重定向到目标接口
官方文档:https://vuejs-templates.github.io/webpack/proxy.html
proxyTable: { '/apidomain':{ target:'http://localhost:prot',//或ip或域名。 changeOrigin:true, pathRewrite: { '^/apidomain': '' } } },
若要通过IP在局域网访问h5,启动开发服务器的时候添加host
参数即可
即package.json的dev命令配置如下
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",
关闭chrome安全策略实现跨域
windows中新建一个bat文件粘贴下面的命令即可以此模式打开
cd "C:\Program Files (x86)\Google\Chrome\Application" chrome.exe --disable-web-security --user-data-dir=c:/CorsUserData
asp.net core 服务端的CORS跨域设置
官方文档:https://docs.microsoft.com/zh-cn/aspnet/core/security/cors
在实际设置中,因为在h5端添加header参数产生了预检(OPTIONS)请求
express
서버를 통해 대상 인터페이스로 리디렉션됩니다. 공식 문서: https://vuejs -templates.github .io/webpack/proxy.htmlpublic void ConfigureServices(IServiceCollection services) { //若只有部分接口则定义一个或多个命名的 CORS 策略,并在运行时按名称然后选择的策略,通过特性标记去设置跨域 详情见文档 services.AddCors(); }IP를 통해 LAN에서 h5에 액세스하려면 개발 서버 시작 시
host
매개변수를 추가하면 됩니다즉, package.json의 dev 명령 구성은 다음과 같습니다//读取配置文件中设置的允许跨域的域名 CorsOrigins为一个数组 设置["*"]则会允许所有 var origins = Configuration.GetSection("CorsOrigins").GetChildren().Select(s => s.Value).ToArray(); app.UseCors(e => { e.WithOrigins(origins).AllowAnyHeader().AllowAnyMethod().AllowCredentials(); });크로스 도메인을 달성하려면 Chrome 보안 정책을 끄세요 Windows에서 새 bat 파일을 만들고 다음 명령을 붙여넣어 이 모드에서 엽니다
//Startup文件中Configuration对象的获取 public IConfiguration Configuration { get; } public Startup() { var builder = new ConfigurationBuilder()//...AddJsonFile($"appsettings.json"); Configuration = builder.Build(); }
asp .net 코어 서버 측 CORS 도메인 간 설정
공식 문서: https:/ /docs.microsoft.com/zh-cn/aspnet/core/security/cors실제 설정에서 헤더 매개변수를 추가합니다. h5 측에서 preflight(OPTIONS) 요청
을 생성하는 것을 봤습니다. 위 글 이후에 일반 매개변수가 쿼리 매개변수
1로 수정되었습니다. cors 서비스 추가 rrreee
🎜2. 미들웨어 활성화 🎜🎜rrreeerrreee🎜위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다. 🎜🎜관련 기사: 🎜🎜🎜webpack 4.0.0-beta.0 버전의 새로운 기능(자세한 튜토리얼) 🎜🎜🎜🎜SpringMVC를 사용하여 vue 도메인 간 요청 해결🎜🎜🎜🎜Vue 구성 요소 및 Route의 수명 주기( 자세한 튜토리얼) 🎜 🎜위 내용은 Vue 도메인 간 처리 문제(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!