当前位置:首页 > 编程教程 > vue技术文章 > vue几个常用跨域处理方式介绍

vue常用跨域处理方法

  • 发布时间:
  • 作者:码农之家
  • 点击:51

这篇文章主要知识点是关于vue、跨域、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js v2.x 官方教程
  • 类型:Vue手册大小:5.11 MB格式:PDF作者:赵远航
立即下载

vue几个常用跨域处理方式介绍

设置express代理请求

在基于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)请求,看了上述文章后将通用参数修改到了query参数中

1. 添加cors服务

public void ConfigureServices(IServiceCollection services)
{
 //若只有部分接口则定义一个或多个命名的 CORS 策略,并在运行时按名称然后选择的策略,通过特性标记去设置跨域 详情见文档
 services.AddCors();
}

2. 启用中间件

//读取配置文件中设置的允许跨域的域名 CorsOrigins为一个数组 设置["*"]则会允许所有
var origins = Configuration.GetSection("CorsOrigins").GetChildren().Select(s => s.Value).ToArray();
app.UseCors(e =>
{
 e.WithOrigins(origins).AllowAnyHeader().AllowAnyMethod().AllowCredentials();
});
//Startup文件中Configuration对象的获取
public IConfiguration Configuration { get; }
public Startup()
{
 var builder = new ConfigurationBuilder()//...AddJsonFile($"appsettings.json");
 Configuration = builder.Build();
}

JSONP

JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • 在vue中如何使用axios跨域和拦截器的使用
  • vue中axios不支持vue.use()方式声明使用。 所以有两种方法可以解决这点: 第一种: 在main.js中引入axios,然后将其设置为vue原型链上的属性,这样在组件中就可以直接 this.axios使用了 import axios from axios;Vue.prototype.axios=axios; components: this.axios({ url:a.xxx, method:post, data:{ id:3, name:jack } }) .then(function(res){ console.log(res); }) .catch(function(err){ console.log(err); }) } 这里需要注意一点,就是在axios中把请……

  • vue2.0中proxyTable用axios进行跨域请求的设置方法
  • 这里请求的是知乎日报的api,由@izzyleung这位大神提供的,这是github地址。 在vue-cli构建的项目中先安装axios npm install axios -S 这里暂不考虑用vuex封装的方式,只讲在当前组件中直接使用。 先在script中引入 用prototype将axios添加为vue原生的属性,$ajax相当于axios的别名。 然后在要调用的方法或是钩子中请求,$ajax就是上面注册的axios,如果想直接用axios不想设置prototype也可以直接按官方……

  • vue-cli开发时ajax跨域的方法
  • 目的:使用vue-cli构建的项目,在开发时,想要访问后台接口获取数据,这时就会出现跨域问题。 在config/index.js中进行如下配置 【即在进行ajax请求时,地址中任何以/api开头的请求地址都被解析为目标地址,target就是你想要的后台接口地址】 proxyTable: { /api: { target: https://188.188.18.8, changeOrigin: true, pathRewrite: { ^/api: } } }` vue-resource调用示例 this.$http.get(/api/v4/user/login, [options]).then(funct……

  • 解决Vue项目中跨域问题的方法整理
  • 方法 后台更改header 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) Jquery jsonp 后台更改header header(Access-Control-Allow-Origin:*);//允许所有来源访问 header(Access-Control-Allow-Method:POST,GET);//允许访问的方式 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) 打开config/index.js,在proxyTable中添写如下代码: proxyTable: { /api: { target: 填写请求源地址, //源地址 changeOrigin: true, /……

    vue 相关电子书
    学习笔记

    Copyright 2018-2020 xz577.com 码农之家

    本站所有电子书资源不再提供下载地址,只分享来路

    版权投诉 / 书籍推广 / 赞助:QQ:520161757