jjzjj

No ‘Access-Control-Allow-Origin‘ header is present on the requested resource关于vue跨域问题

嘎嘎gagal 2023-06-15 原文

        浏览器为了安全考虑，有一个最基本的安全策略，即同源策略。

        同源策略规定：浏览器在解析Ajax请求时，要求浏览器的路径与Ajax的请求的路径必须满足三个要求，即请求的协议、域名、端口号都相同，满足同源策略，可以访问服务器，否则，只要有一个不相同，那么都是非同源。

        跨域问题的出现是因为浏览器的同源策略问题，所谓同源:就是两个页面具有相同的协议（protocol），主机（host）和端口号（port），它是浏览器最核心也是最基本的功能，如果没有同源策略我们的浏览器将会十分的不安全，随时都可能受到攻击。

当我们请求一个接口的时候，出现如：Access-Control-Allow-Origin 字眼的时候说明请求跨域了

 问题一：所有使用JavaScript的浏览器都会支持同源策略。同源策略即指域名/协议/端口号相同。只要有一个不同，就会当作跨域请求

一是可以让后端接口或配置文件里添加跨域代码

header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
//或者过滤器中添加
httpResponse.setHeader("Access-Control-Allow-Origin","*");
httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
httpResponse.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");

二是可以前端设置代理

找到config文件夹下的index.js文件，然后找到dev下的proxyTable{}

 proxy: {
"/test": {
	target: "http://www.baidu.com/",   //这里设置需要请求的接口地址
	changeOrigin: true
    }
}

然后找到请求页面，在axios的请求接口里面只写/test/getlist就行了。/test/跟上接口地址

或者是另一种配置： 同样是更改config/index.js的配置文件

module.exports = {
  dev: {
  	proxyTable: {
		'/test/: {
			target: 'http://www.baidu.com/',
			changeOrigin: true,
			pathRewrire: {
				'^/test': ''
			}
		}
	}
  }

遇到接口路径有test的，就换成http://www.baidu.com/这个请求头，同时把test去掉

或者是其他版本时: 在项目根目录下新建vue.config.js文件，在该文件内新增配置

module.exports = {
    devServer: {
        proxy: {
            '/test': {
                target: 'https://baidu.com',
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/test': ''
                }
            }
        }
    },
}

我这里的配置是这样的：

 然后地址是配置到了这边

 这样打包的时候就会把值带过去

问题二：

重复Access-Control-Allow-Origin

 HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
        //*表示允许所有域名跨域
        httpResponse.setHeader("Access-Control-Allow-Origin","*");
        httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
        httpResponse.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
        httpResponse.setHeader("Access-Control-Max-Age", "5000");
        httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,Authorization,Token");
        filterChain.doFilter(servletRequest, servletResponse);

在前端访问后端时出现了跨域问题，在返回的请求头中出现了俩次Access-Control-Allow-Origin:"*",导致请求跨域，原因是因为配置了两次跨域。一次是在FileUtil中配置了response.addHeader("Access-Control-Allow-Origin", "*")，另外一次是使用CorsFilter又配置了一次，所以才出现了出现有两个Access-Control-Allow-Origin问题，所以只需要把其中一个配置删除就可以解决了。就是过滤器中或配置文件或者其他设置中配置了跨域才会出现的问题。

问题三：后端接收到的类型不一致。

我这边是传值的时间出了问题，后端需要的时间类型是:2022-12-06 00:00:00，而前端传值是2022-12-06，所以然后也报了跨域问题:No 'Access-Control-Allow-Origin' header is present on the requested resource，把前后端需要的属性的类型都统一就解决了。

 

Access-Control-Allow-Originlsquoxff0cxffcodevue.jsjavascript前端java后端

有关No ‘Access-Control-Allow-Origin‘ header is present on the requested resource关于vue跨域问题的更多相关文章

  1. 使用 ACL 调用 upload_file 时出现 Ruby S3 "Access Denied"错误 - 2

    我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常，除了该文件不是公开可用的，而且我无法获得它的公共(public)URL。但是当我登录到S3时，我可以正常查看我的文件。为了使其公开可用，我将最后一行更改为obj.upload_file(file

  2. ruby - Sinatra set cache_control to static files in public folder编译错误 - 2

    我不知道为什么，但是当我设置这个设置时它无法编译设置:static_cache_control，[:public，:max_age=>300]这是我得到的syntaxerror,unexpectedtASSOC,expecting']'(SyntaxError)set:static_cache_control,[:public,:max_age=>300]^我只想将“过期”header设置为css、javaascript和图像文件。谢谢。 最佳答案 我猜您使用的是Ruby1.8.7。Sinatra文档中显示的语法似乎是在Ruby1.

  3. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  4. ruby-on-rails - rspec - 我怎样才能让 "pendings"有我的文本而不仅仅是 "No reason given" - 2

    我有这个代码:context"Visitingtheusers#indexpage."dobefore(:each){visitusers_path}subject{page}pending('iii'){shouldhave_no_css('table#users')}pending{shouldhavecontent('Youhavereachedthispageduetoapermissionic错误')}它会导致几个待处理，例如ManagingUsersGivenapractitionerloggedin.Visitingtheusers#indexpage.#Noreason

  5. ruby-on-rails - Rails FasterCSV "unquoted fields do not allow\r or\n" - 2

    我在使用FasterCSV和我的rakedb:seeds迁移时遇到问题。我收到错误:“rake中止!未加引号的字段不允许\r或\n(第2行)”在以下seeds.rb数据上:require'csv'directory="db/init_data/"file_name="gardenzing020812.csv"path_to_file=directory+file_nameputs'LoadingPlantrecords'#Pre-loadallPlantrecordsn=0CSV.foreach(path_to_file)do|row|Plant.create!:name=>row[1

  6. ruby-on-rails - Rails - Carrierwave 进程抛出 ArgumentError : no images in this image list - 2

    在尝试实现应用auto_orient的过程之后!对于我的图片，我收到此错误:ArgumentError(noimagesinthisimagelist):app/uploaders/image_uploader.rb:36:in`fix_exif_rotation'app/controllers/posts_controller.rb:12:in`create'Carrierwave在没有进程的情况下工作正常，但在添加进程后尝试上传图像时抛出错误。流程如下:process:fix_exif_rotationdeffix_exif_rotationmanipulate!do|image|

  7. ruby-on-rails - Rails 2.3.5 : How does one access code inside of lib/directory/file. rb？ - 2

    我创建了一个文件，这样我就可以在lib/foo/bar_woo.rb中的许多模型之间共享一个方法。在bar_woo.rb中，我定义了以下内容:moduleBarWoodefhelloputs"hello"endend然后在我的模型中我正在做类似的事情:defMyModel解释器提示它期望bar_woo.rb定义Foo::BarWoo。《使用Rails进行敏捷Web开发》一书指出，如果文件包含类或模块，并且文件使用类或模块名称的小写形式命名，那么Rails将自动加载文件。因此我不需要它。定义代码的正确方法是什么，在我的模型中调用代码的正确方法是什么？ 最佳答案

  8. (附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke()  去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on

  9. Ruby gem 安装和 "No such file to load" - 2

    我在Backtrack5中使用Ruby1.9.2dev编写脚本，但在尝试使用库“htmlentities”解析html实体时遇到了一些问题。虽然我已经用gem安装了它，但我无法加载它。我将向您展示我在控制台中遇到的问题:root@bt:~#gemlist-dhtmlentities***LOCALGEMS***htmlentities(4.3.1)Author:PaulBattleyHomepage:https://github.com/threedaymonk/htmlentitiesInstalledat:/var/lib/gems/1.9.2Amoduleforencodinga

  10. ruby - 杰基尔服务错误 : no implicit conversion of nil into String - 2

    我用这个错误搜索了jekyll。jekyll处理页面时似乎出现了ruby​​错误，但我根本不了解ruby​​。杰基尔版本1.3.1我什至重新安装了ruby​​和jekyll，但结果没有改变。更新:在我将jekyll从1.31降级到1.20后，这个错误消失了注意:我的网站是用jekyll1.20创建的，所以它不能用1.3.1构建？这是核心问题吗？E:\GitHub\sample>jekyll服务--trace:Configurationfile:E:/GitHub/sample/_config.ymlSource:E:/GitHub/sampleDestination:E:/GitHub

随机推荐