因为ajax请求一个服务的时候,服务器端,比如thinkphp端,或者java框架,它会检测,你请求时候的域名,就是http请求的时候,request header不是会把客户端的Request URL,Referer 携带给服务端么。

它就会去检测这个值,和服务器的域名是不是同一个。

它这么干就是为了避免,你们随便哪个人来请求我的接口。比如腾讯有个方法,能返回当前所有的在线用户,它当然只允许腾讯自己去获取这个数据,不然它服务器开着给你提供服务么。然后你界面展示一下就像你自己提供的服务一样,不就傻逼了。它就检测,你这个域名和我的不一样就不准请求这个接口,当然还可以设置某一些域名或者ip是允许访问的,其他的就不允许,只要服务端配置一下就行了。我还看到别人写的xxs攻击,我还无法理解。

做联调的时候,前后端可能是独立的服务,就会出现跨域的问题。

跨域问题有好多解决的办法,前后端都可以处理。

1.后端,只要配置

允许 * 所有的,这个是正则匹配。就能访问了,成功。

2.后端写一个通用的class然后去继承,就是上面方法的延伸。

3.vue请求的时候,可以配代理,这样请求的时候就去走代理,不走原本的请求,就能解决跨域的问题,单独改前端就行。修改 (版本 "@vue/cli-service": "^4.1.0")

vue.config.js:文件
vue.config.js:
module.exports = {
runtimeCompiler: true,
publicPath: '/', // 设置打包文件相对路径
devServer: {
// host: 'localhost',
port: 8071, 这是前端服务的端口号
// open: true, //配置自动启动浏览器
proxy: {
'/api': {
target: 'http://127.0.0.1:8100/', //对应自己的接口
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
},
}

axios的请求接口任然写 localhost:8071/api/*****接口名,就是vue启的那个服务名。请求的时候,会代理到  http://127.0.0.1:8100/api/****上面去

前端请求的接口是这样的,

但是实际的接口是这样的。这个下面的这个接口地址就是proxy代理里面写的那个地址

4.ajax,jsonp但是,这个后台也要一起修改,并不是前端改好就好了的。我从来没有用过,除了自己测试,后台是绝对不可能帮你改这么多代码的,自己改,上传的时候再删掉。

5.nginx里面配置代理,这个和之前写过的thinkphp无法访问404一样,请求代理,服务器端修改就可以了,没试过。这是链接 https://www.cnblogs.com/chenyi4/p/12332092.html

server{
# 监听9099端口
listen 9099;
# 域名是localhost
server_name localhost;
#凡是localhost:9099/api这个样子的,都转发到真正的服务端地址http://localhost:9871
location ^~ /api {
proxy_pass http://localhost:9871;
}
}

抄的别人的代码

6.实在不行可以把接口数据down下到本地请求本地json数据,然后发布的时候改一下接口地址就行了,这样就完全摆脱对后台接口的依赖。

No 'Access-Control-Allow-Origin'跨域问题- (mysql-thinkphp) (6)的更多相关文章

  1. Access control allow origin 简单请求和复杂请求

    原文地址:http://blog.csdn.net/wangjun5159/article/details/49096445 错误信息: XMLHttpRequest cannot load http ...

  2. 解决js ajax跨越请求 Access control allow origin 异常

    // 解决跨越请求的问题 response.setHeader("Access-Control-Allow-Origin", "*");

  3. Ajax 跨域 异步 CORS

    HTTP access control (CORS) 核心在于使用定制(添加新的header)HTTP header让浏览器和服务器有更多的相互了解,从而决定一个请求或者响应成功还是失败   对于一个 ...

  4. 基于.Net Framework 4.0 Web API开发(5):ASP.NET Web APIs AJAX 跨域请求解决办法(CORS实现)

    概述:  ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特 ...

  5. WebApi Ajax 跨域请求解决方法(CORS实现)

    概述 ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题, 特别 ...

  6. WebApi Ajax 跨域请求解决方法(CORS实现)(作者:jianxuanbing)

    概述 ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特别各 ...

  7. ajax跨域问题Access-Control-Allow-Origin

    Access control allow origin直译过来就是"访问控制允许同源",这是由于ajax跨域访问引起的.所谓跨域就是,在a.com域下,访问b.com域下的资源:出 ...

  8. AJAX跨域POST发送json时,会先发送一个OPTIONS预请求

    我们会发现,在很多post,put,delete等请求之前,会有一次options请求. 根本原因就是,W3C规范这样要求了!在跨域请求中,分为简单请求(get和部分post,post时content ...

  9. angular之跨域

    一.什么是跨域? 跨域是指一个域下的文档或者脚本去请求另一个域下的资源.(广义) 广义的跨域: 1.资源跳转:链接跳转.重定向.表单提交. 2.资源嵌入:<link>.<script ...

  10. Ajax和跨域请求

    Ajax 一.概述 Web 程序最初的目的就是将信息(数据)放到公共的服务器,让所有网络用户都可以通过浏览器访问. 在次之前,我们可以通过以下几种方式让浏览器发出对服务端的请求,获取服务端的数据: 地 ...

随机推荐

  1. 转:HttpClient使用详解

    一.使用方法 使用HttpClient发送请求.接收响应很简单,一般需要如下几步即可. 1. 创建HttpClient对象. 2. 创建请求方法的实例,并指定请求URL.如果需要发送GET请求,创建H ...

  2. maven设置jdk版本

    方法一:在maven文件夹下的settings.xml中添加 <profile> <id>jdk-1.8</id> <activation> <a ...

  3. Java 并发锁

    Java 中的锁 阻塞锁.可重入锁.读写锁.互斥锁.悲观锁.乐观锁.公平锁.偏向锁.对象锁.线程锁.锁粗化.锁消除.轻量级锁.重量级锁.信号量.独享锁.共享锁.分段锁 一.常见的锁 synchroni ...

  4. Duilib 修改程序exe、在任务栏以及任务管理器上的图标

    参考:https://blog.csdn.net/Rongbo_J/article/details/47379997       https://www.cnblogs.com/happinessda ...

  5. springmvc 请求出现400错误(当传入的参数类型是Date时加上下面代码试试)

    @InitBinder protected void initBinder(HttpServletRequest request, ServletRequestDataBinder binder) t ...

  6. 莫烦 - Pytorch学习笔记 [ 二 ] CNN ( 1 )

    CNN原理和结构 观点提出 关于照片的三种观点引出了CNN的作用. 局部性:某一特征只出现在一张image的局部位置中. 相同性: 同一特征重复出现.例如鸟的羽毛. 不变性:subsampling下图 ...

  7. Solr与tomcat搭建(搭建好)

    https://pan.baidu.com/s/1kXagNYJ  密码:hgxd

  8. 2_04_MSSQL课程_查询_类型转换、表联合、日期函数、字符串函数

    类型转换 Convert(目标类型,转换的表达式,格式规范) Cast(表达式 as 类型) select Convert(nvarchar(32)),CustomerId))+Title from ...

  9. 02-01 Android学习进度报告一

    前两天,刚刚安装好有关Android开发有关的软件并配好了环境,有一些体会想要发表. 首先我了解到有一款专门用于Android开发的软件,叫做Android Studio ,是一个IDE集成软件 于是 ...

  10. CNN算法详细分析

    test_example_CNN.m train_x = double(reshape(train_x',28,28,60000))/255; test_x = double(reshape(test ...