Vue 도메인 간 처리 문제(자세한 튜토리얼)

이 글에서는 Vue가 도메인 간 문제를 처리하는 방식에 대해 자세히 소개하고 이에 관심이 있는 친구들이 배울 수 있는 지식 포인트를 소개합니다.

특급 프록시 요청 설정

vue-cli 기반 프로젝트에서는 개발 환경 구성(config/dev.env.js)에서 모든 를 보낼 수 있도록 프록시를 설정합니다. code>/ apidomain으로 시작하는 요청은 npm run devvue-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.html

public 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!