您的当前位置:首页Vue+php处理跨域问题

Vue+php处理跨域问题

2023-11-29 来源:瑞奇养生

解决办法

文章链接:CORS: credentials mode is ‘include'

xhrFields: { withCredentials: false},

withCredentials: true 改成 withCredentials: false,如果你没加上面那段代码当然也不会报这个错。虽然是解决方法很简单,但经此发现许多知识没掌握不得不梳理下。

?HTTP 请求方式有许多种,有些请求会触发 CORS 预检请求。“需预检的请求”会使用 OPTIONS 方法发起一个预检请求到服务器,以获知服务器是否允许该实际请求。

?对于跨域请求浏览器一般不会发送身份凭证信息。如果要发送凭证信息,需要设置 XMLHttpRequest 的 withCredentials 属性为 true:withCredentials: true。此时要求服务器的响应信息中携带 Access-Control-Allow-Credentials: true,否则响应内容将不会返回。

?对于携带身份凭证的请求,服务器不得设置 Access-Control-Allow-Origin 的值为“*”。因为请求头携带了 Cookie 信息。要将 Access-Control-Allow-Origin 的值设置为 http://www.zrt.local:8080。

?另外,响应头中也携带了 Set-Cookie 字段,尝试对 Cookie 进行修改。如果操作失败,将会抛出异常。

跨域请求想要带上 cookies 必须在请求头里面加上:

crossDomain: true, xhrFields: { withCredentials: true}

又变成文章开头的问题了,解决办法:

后台代码:

Access-Control-Allow-Origin: 'http://www.zrt.local:8080'Access-Control-Allow-Credentials: true

前端代码:

crossDomain: true, xhrFields: { withCredentials: true}

跟之前一样就行了。

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

小程序开发分享页面后返回首页

Vue的UI组件库自定义动态组件

小编还为您整理了以下内容,可能对您也有帮助:

vue跨域解决方法

vue跨域解决方法

使用axios请求

第一步骤

在vue.config.js 文件中 mole.exports = { } 中添加

devServer: {

proxy: {

'/profile': { //指定 路径 要 跨域请求地址

// 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题

// 将/api开头的url转发到target上。

target: ' https://sso.www.eee.cn/profile',// 跨域请求地址

changeOrigin: true, //虚拟的站点需要更管origin

ws: true, // 代理websockets

secure: true, // 如果是https接口,需要配置这个参数

pathRewrite: {

// 顾名思义,将/api重写为 / 此时url变为 http://192.168.101.110:8888/ 而不是 http://192.168.101.110:8888/api

'^/profile': ''

}

}

}

第二步骤

在封装axios请求中设置

const service = axios.create({

baseURL: '/profile',//定义要跨域的接口路径

withCredentials: true,//是否支持跨域

timeout: 500000, // request timeout

headers: {

'Cache-Control': 'no-cache',

'Content-Type': 'application/x-www-form-urlencoded'

}

});

详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)

在用vue做前端开发的时候,因为一般跑vue使用的webpack自带的node服务,而我们实际要使用的数据确是后台服务器上的,所以这就涉及到服务器请求跨域的问题。本来在诸如axios之类的网络请求参数里面配置

withCredentials: true,

就可以解决跨域问题的,但是现在浏览器比如chorme有做了新的跨域,比如要服务器端配置允许跨域才行,详见跨域问题解决,是英文的,看起来需要花点功夫;那有没有不需要服务器端配置就能解决浏览器的跨域问题的办法呢?答案肯定是有的!!

这里就说chorme吧,因为chorme基本都是前端主流浏览器了,配置方法如下:

版本号49之前的跨域设置

具体做法为:

1.下载并安装好chorme浏览器后在桌面找到浏览器快捷图标并点击鼠标右键的属性一栏。

2.在属性页面中的目标输入框里加上 --disable-web-security 如下图所示:

3.点击应用和确定后关闭属性页面,并打开chrome浏览器。如果浏览器出现提示“你使用的是不受支持的命令标记 --disable-web-security”,那么说明配置成功。

版本号49之后的chrome跨域设置

chrome的版本升到49之后,跨域设置比以前严格了,在打开命令上加--disable-web-security之后还需要给出新的用户个人信息的目录。众所周知chrome是需要用gmail地址登录的浏览器,登录后就会生成一个存储个人信息的目录,保存用户的收藏、历史记录等个人信息。49版本之后,如果设置chrome浏览器为支持跨域模式,需要指定出一个个人信息目录,而不能使用默认的目录,估计是chrome浏览器怕用户勿使用跨域模式泄露自己的个人信息(主要是cookie,很多网站的登录token信息都是保存在cookie里)。

具体做法为:

1.在电脑上新建一个目录,例如:C:MyChromeDevUserData

2.在属性页面中的目标输入框里加上 --disable-web-security --user-data-dir=C:MyChromeDevUserData,--user-data-dir的值就是刚才新建的目录。

3.点击应用和确定后关闭属性页面,并打开chrome浏览器。

再次打开chrome,发现有“--disable-web-security”相关的提示,说明chrome又能正常跨域工作了。

跨域成功后,首页换成了google的welcome页面,同时原来收藏的链接和历史记录都不见了,而C:MyChromeDevUserData目录下则生成了新的个人信息相关的文件。

这样就解决了诸如

报错的问题,一个坑给填满了,后面还有很多坑需要去填,哈哈!!!

如何在vue里面优雅的解决跨域(路由冲突问题)

如何在vue里面优雅的解决跨域,路由冲突问题

当我们在路由里面配置成以下代理可以解决跨域问题

proxyTable: {

'/goods/*': {

target: 'http://localhost:3000'

},

'/users/*': {

target: 'http://localhost:3000'

}

},

这种配置方式在一定程度上解决了跨域问题,但是会带来一些问题,

比如我们的vue 路由 也命名为 goods,这时候就会产生了冲突,

如果项目中接口很多,都在这里配置是很麻烦的,也容易产生路由冲突。

正确的姿势

如果把所有的接口,统一规范为一个入口,在一定程度上会解决冲突

把以上配置统一前面加上 /api/

proxyTable: {

'/api/**': {

target: 'http://localhost:3000'

},

},

如果我们配置成这种方式,在使用http请求的时候就会发生变化,会在请求前面加上一个api,相对路由也会发生变化,也会在接口前面加上api,这样也会很麻烦,我们可以使用以下方式来解决这个问题

proxyTable: {

'/api/**': {

target: 'http://localhost:3000',

pathRewrite:{

'^/api':'/'

}

},

},

上面这个代码,就是把咱们虚拟的这个api接口,去掉,此时真正去后端请求的时候,不会加上api这个前缀了,那么这样我们前台http请求的时候,还必须加上api前缀才能匹配到这个代理,代码如下:

logout(){

axios.post('/api/users/logout').then(result=>{

let res = result.data;

this.nickName = '';

console.log(res);

})

},

getGoods(){

axios.post('/api/goods/list').then(result=>{

let res = result.data;

this.nickName = '';

console.log(res);

})

}

我们可以利用axios的baseUrl直接默认值是 api,这样我们每次访问的时候,自动补上这个api前缀,就不需要我们自己手工在每个接口上面写这个前缀了

在入口文件里面配置如下:

import Axios from 'axios'

import VueAxios from 'vue-axios'

Vue.use(VueAxios, Axios)

Axios.defaults.baseURL = 'api'

如果这配置 'api/' 会默认读取本地的域

上面这样配置的话,不会区分生产和开发环境

在config 文件夹里面新建一个 api.config.js 配置文件

const isPro = Object.is(process.env.NODE_ENV, 'proction')

mole.exports = {

baseUrl: isPro ? 'http://www.vnshop.cn/api/' : 'api/'

}

然后在main.js 里面引入,这样可以保证动态的匹配生产和开发的定义前缀

import apiConfig from '../config/api.config'

import Axios from 'axios'

import VueAxios from 'vue-axios'

Vue.use(VueAxios, Axios)

Axios.defaults.baseURL = apiConfig.baseUrl

经过上面配置后,在dom里面可以这样轻松的访问,也不需要在任何组件里面引入axios模块了。

logout(){

this.$http.post('/users/logout').then(result=>{

let res = result.data;

this.nickName = '';

console.log(res);

})

},

getGoods(){

this.$http.post('/goods/list').then(result=>{

let res = result.data;

this.nickName = '';

console.log(res);

})

}

最终代码

在代理里面配置

proxyTable: {

'/api/**': {

target: 'http://localhost:3000',

pathRewrite:{

'^/api':'/'

}

},

},

在config里面的api.config.js 配置

在config 文件夹里面新建一个 api.config.js 配置文件

const isPro = Object.is(process.env.NODE_ENV, 'proction')

mole.exports = {

baseUrl: isPro ? 'http://www.vnshop.cn/api/' : 'api/'

}

关于生产和开发配置不太了解

可以去 dev-server.js 里面看配置代码

const webpackConfig = (process.env.NODE_ENV === 'testing' || process.env.NODE_ENV === 'proction') ?

require('./webpack.prod.conf') :

require('./webpack.dev.conf')

在main.js 入口文件里面配置

import apiConfig from '../config/api.config'

import Axios from 'axios'

import VueAxios from 'vue-axios'

Vue.use(VueAxios, Axios)

Axios.defaults.baseURL = apiConfig.baseUrl

在dom里面请求api的姿势

logout(){

this.$http.post('/users/logout').then(result=>{

let res = result.data;

this.nickName = '';

console.log(res);

})

},

getGoods(){

this.$http.post('/goods/list').then(result=>{

let res = result.data;

this.nickName = '';

console.log(res);

})

}

vuejs项目生产环境,上线解决跨域问题,请看以下文章

vue项目上线 看看这个文章,专门讲上线的

vue项目打包后怎样优雅的解决跨域

前言

在使用vue.js开发前端项目时,再结合webpack搞起各种依赖、各种插件进行开发,无疑给前端开发带来了很多便捷,就在解决跨域这个问题上,相信众多用vue.js的前端同僚们同我一样尝到了甜头,开发环境全靠proxyTable一通配置简直不要太酸爽。还不明所以然的新手们可能还没搞清我说的是什么,就是下面这几行配置:

proxyTable: {

'/api': {

target: 'http://113.113.113.113:5000', //假的接口地址哈

changeOrigin: true,

pathRewrite: {

'^/api': ''

}

},

我们的跨域竟然就这样完美的解决了,然后就开始愉快的请求后端的接口啦!!

回到正题

具体场景:公司的一个h5项目是部署在客户端的,但是部署后出现bug了,由于多人协同开发且赶进度竟然是打包后因为CSS的问题多个页面布局乱了,但是开发环境并没有问题啊,怎么打完包样式就乱了?那就打开dist下的index.html看看呗,复现一下bug,想都不用想,页面没数据怎么复现,再去造一套假数据?作为一个不喜欢这样折腾的人必然是不想做这种事情的。

就不劳烦后端了,咱自己解决!

nginx 还是要会一些些的,自己配置一下,分分钟解决,哈哈!

server {

listen 8082;

server_name 127.0.0.1; //咱自己nginx服务器地址

#charset koi8-r;

#access_log logs/host.access.log main;

location / {

root html;

index index.html index.htm;

}

location /app-api {

rewrite ^.+app-api/?(.*)$ /$1 break;

include uwsgi_params;

proxy_pass http://113.113.113.113:5001/; //后端接口地址

//关键部分start

add_header Access-Control-Allow-Origin *;

add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';

add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,token';

//关键部分end

//以下配置参见nginx配置文档哈

#Proxy Settings

proxy_redirect off;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_set_header Connection close;

proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;

proxy_max_temp_file_size 0;

proxy_connect_timeout 90;

proxy_send_timeout 90;

proxy_read_timeout 90;

proxy_buffer_size 4k;

proxy_buffers 4 32k;

proxy_busy_buffers_size 64k;

proxy_temp_file_write_size 64k;

}

}

目的是把后端接口用 nginx 再代理一遍,咱自己用 nginx 间接允许一下跨域请求!

start nginx //在nginx目录启动服务

通常我们会做一个统一的管理接口的js文件,如下形式

var BASE_URL = '/api';

var isPro = process.env.NODE_ENV === 'proction'

if(isPro){

BASE_URL= 'http://113.113.113.113:5000', //线上或者测试地址

//BASE_URL= 'http://127.0.0.1:8020', //nginx代理地址

//当我们需要打包后依然能正常调接口的时候用这个

}

const UrlConfig = {

getToken:BASE_URL + "某接口"

}

export default {

UrlConfig

};

至此,就把打包后接口跨域的问题优雅的解决啦。

结语

因为公司的前后端项目通常都放在同一台服务器,或者不在同一台服务器的时候跨域也是靠后端的同志们去解决的,所以很少在生产环境中靠前端解决跨域的这项需求。不过我分享的这个小技巧也只适用于以上类似场景中,归根结底还是要在多人协同开发的过程中提前规划好公共以及个人的编程规范,尽量保证开发环境和生产环境是一致的,就可以摆脱很多类似的问题。

瑞奇养生还为您提供以下相关内容希望对您有帮助:

PHP跨域上传的几种方法

IIS等的虚拟二级目录就不说了,好处是现有程序不做任何修改,唯一坏处就是两台服务器必须在一个局域网中,当然你用单台也就没这个问题了 方法二:FTP同步更新 PHP是支持FTP的,给个FTP类里面(不是我写的,只是加了个建...

VUE+UEditor图片跨域上传怎样实现

本着不想改太多源代码的基础上尝试着...一不小心就可以用了 解决方案:上传单图片的时后端不直接返回JSON,而是重定向到前端页面前端:VUE后端:WAMP + ThinkPHP5.0前端http://localhost:88881、去官网下载UEditor到vue中...

php js跨域请求,并设置cookies

JS跨域,POST可以通过提交隐藏表单至隐藏框架页来得到请求结果。而GET请求则可以在目标地址后面加上要请求的GET参数然后抓取目标页的所有网页内容,再通过正则处理获得结果;也可以使用JSON来获取(详情请自行学习JSON,很简单的)。

vue3怎么和python后端交互

在 Vue 3 中,你可以使用 Axios 或 Fetch API 来与 Python 后端进行交互。这两种方法都可以发送 HTTP 请求,并处理后端的响应数据。以下是一个简单的示例:安装 Axios(如果你选择使用 Axios):在 Vue 3 组件中使用 Ax...

为什么使用vue时,使用put方式访问后台报错,get正常?

这种情况是跨域问题。后台允许跨域的方式不包括put方式,可以检查自己的接口请求方式,并在后台的跨域请求头加入这种方式。

vue前端如何访问idea中resources下的图片资源

SDK 访问这些云存储服务,获取资源 URL,再通过 HTTP 访问这些资源。需要注意的是,在 Vue 前端项目中访问 HTTP 资源时,需要处理跨域问题。可以在后端服务中配置 CORS 规则,或者在前端项目中使用代理服务器解决跨域问题。

php session 作用域范围

$_SESSION 作为超级变量是可以在整个域内进行访问的,一旦跨域就不能够直接访问了,得使用其他的方法传递过去,比如URL后面带着问号的方法进行GET传递到另一个域,然后另一个域对接收的的变量进行处理生成那个域的会话等等。

2020年想做Web前端工程师需要学习哪些技术

1.学习html这个是最简单的,也是最基础的.要熟练掌握div、formtable、ulli、p、span、font这些标签,这些都是最常用的,特别是div和table,div用于布局、table也可以用于布局,但是不灵活,基本table是用来和数据打交道。2.学习...

悟空CRM安装需要什么配置

路由:Vue-Router 3.x 数据交互:Axios UI框架:Element-UI 2.6.3 悟空crm9.0的运行环境要求PHP5.6以上 一键安装 代码中已集成前端vue打包后文件,可免去打包操作: 以本地(phpstudy集成环境)搭建举例: 下载悟空CRM...

PHP程序员将何去何从?

2)移动互联网的兴起。很多企业,重心都在移动端,为Web而生的PHP,变成了只提供API了;3)大前端的出现。之前,前端只是简单用来处理一些特效、点击事件等,随着Vue、React和Angular三大框架的兴起,非移动端的开发,很多也...

Top